王鹏1、董爱华1,2、鲍萍萍1

（1.东华大学信息科学与技术学院，上海；2.数字纺织服装技术教育部工程研究中心，上海）

摘要：随着移动互联网技术的快速发展，上网的移动设备数量呈爆炸式增长。为了解决网站与未来新设备的兼容性和可访问性，为PC和移动用户提供更舒适的访问界面和速度，设计为响应式。我们分别对响应式元素和媒体、响应式可伸缩布局、响应式字体和图片、响应式框架进行了讨论和研究，最终将响应式相关技术应用到B2C电子商务网站的设计中。

0简介

中国移动互联网用户数量已超过PC互联网用户。据中国互联网络信息中心（CNNIC）数据显示，截至2014年6月，我国移动互联网用户规模达5.27亿，覆盖率达83.4%，超过传统PC整体使用率80.9%。首次使移动互联网用户成为最大的互联网群体[1-2]。

响应式网页设计（RWD）是由伊森·马克特（Ethan）于2010年提出的。该技术是现有三种新技术的组合——流体布局（fluid grids）、媒体查询（media）和弹性图片（ ）[3-4] 。通过响应式设计模型，网站可以自动响应不同的终端，动态改变网页的布局和元素的样式，在不同的终端下精美地呈现相同的内容，如图1所示。

从响应式Web设计的提出到2014年，业界对于响应式Web的设计预测一直非常乐观。在2015年Web设计趋势预测中，响应式仍然是热点[5]。虽然现有的三项技术是响应式网页设计的关键，但它们并不是全部。随着各种互联网终端设备的出现，响应式网页面临设备不兼容、运行效率低等诸多问题[67]。为此，本文提供了响应式网页设计的相关技术手段和设计方法，并应用于实践。

1 响应式网站的设计方法

1.1 使用元标签

在移动设备上浏览网页时，大多数浏览器默认为正常页面尺寸。由于移动设备分辨率较小，页面元素会显得不清晰。为此，您可以使用元标记，它是一个虚拟“窗口”，可以自动响应移动设备的宽度和高度，使页面的字体和图像自适应清晰。

在HTML的头部嵌入以下代码将自动适应屏幕的宽度和高度。

1.2CSS中的媒体查询

@media query可以针对不同的浏览器窗口大小设置不同的CSS样式。当网页在不同的终端设备上浏览时，页面可以响应不同的页面布局。 CSS语法如下：

@media and|not|only (media ) { CSS 代码;}

您还可以针对不同的设备使用不同的：

测试结果如图2和图3所示。

1.3 伸缩式布局

常规布局一般是基于块式和内联流式布局方法。其方向是确定的，缺乏灵活性。采用flexflow流式布局方式，可以从左到右、从右到左、从上到下、从下到上等多个方向对网页元素进行布局。

该布局是一个可扩展的盒模型，可以很容易地做成具有可扩展功能的布局。使用 Flex 布局的元素称为 Flex 容器（flex），简称“容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex items），简称“项目”[8]。布局的思想是，可伸缩容器可以灵活地改变可伸缩项的宽度、高度和出现顺序，以最合理的布局填充屏幕。

考虑到浏览器兼容性，任何容器都可以通过添加以下语法来指定为 Flex 布局。

盒子{ : 盒子; ：mozbox； :ms;:flex;:flex;}

然后通过设置不同子元素的属性，就可以创建响应式的灵活布局。测试结果如图4、图5和图6所示。

1.4 响应式文字和图像

1.4.1 响应式文本

响应式网页不仅可以自适应调整页面布局，还可以根据屏幕的大小自动改变文字和图像的大小。常用的字体单位em和rem分别根据父元素和根元素（html）而变化，与用户屏幕无关。对此，引用了一种新的字体大小单位：[9]。

用vw和vh分别表示高度和宽度，1个单位等于窗口大小的1%。还可以通过vmin和vmax设置最大值和最小值（例如：1vmin取1vw和1vh中较小的值）[9]。

1.4.2 灵活的图像

为了使图像响应浏览器窗口大小，只需为图像设置以下CSS样式：

img {宽度：100%; ： 汽车;}

1.5 响应式框架

随着移动终端的推广，各种移动系统不断涌现。光是苹果和安卓系统的尺寸就各不相同，更不用说其他平板设备了。为了统一移动设备的用户界面（UI），提出了移动开发框架。由于它是纯粹使用HTML、CSS开发的，是移动浏览器的标准，因此可以解决多个移动终端的兼容性问题。

通过使用它，你可以“写更少的代码，做更多的事情”，并且它可以以灵活简单的方式布局网页[10]。使用开发网页需要在网页中引用库（.js）和CSS样式表（.css）。

参考方式有两种：一是直接从CDN链接，二是从官网下载应用。为了使用官方最新版本，本文采用第一种方法。直接复制代码到网页即可

2响应式网站的应用

2.1 项目介绍

网上服装商城是公司为客户建立的B2C电子商务网站。通过线下仓库和线上平台实现线上销售服装的功能。由于页面采用响应式布局，用户可以通过不同的终端设备浏览网站并完成购买功能。系统稳定、可靠、兼容性好。

2.2 系统设计

系统分为两部分：前端部分和后端部分。前端部分主要是用户完成购物功能，后端是管理员系统，主要完成服装分类管理和订单管理。本设计将网站打造为响应式网站，分别设计前端、后端和数据库，最后进行测试。

前台（顾客购买）部分：对于用户系统来说，主要包括注册会员、登录、查询服装、添加购物车、生成订单、支付等功能。

后台（管理员管理）部分：整个系统的运行和服装更新的重要部分。其功能主要包括添加服装、订单管理、删除服装、查看订单详情、发货等。另外还设置了用户访问权限，提高了后台系统的安全性。

基于系统功能分析，所设计系统的前端功能模块如图7所示。

3结论

本文从实际问题出发，针对网站开发过程中存在的问题。图7 系统前端功能模块图

本课题介绍了响应式网站的设计方法，为跨终端设备浏览网页提供了可行的解决方案。最后，理论与实践相结合，开发了响应式在线服装商城系统。

随着越来越多的移动终端加入互联网，移动互联网已占据半壁江山。响应式网站可以为用户提供更加舒适的界面和用户体验，已经成为大势所趋。虽然响应式网页设计的优势和趋势已经被广泛认可，但由于很多前端工程师对其并不熟悉，响应式网站的设计模型仍然存在很多技术难点，比如对老版本IE的支持较差等。 、加载时间长等，因此很难在短时间内流行起来。但可以肯定的是，为了迎合未来移动互联网的发展趋势，响应式网页设计将是未来网站设计的主流。

参考

[1] 三川. CNNIC发布第35次《中国互联网络发展状况统计报告》[J].中国远程教育，2015(2)：3131。

[2] 赵大雷，张正平，何松，等。基于移动互联网的健康监测系统研究[J].微型计算机及其应用，2014，33(8)：1012。

［3］张新辉.响应式网页设计研究［J］.电子技术与软件工程，2014，40(18)：5757。

［4］洪永军.移动终端屏幕自适应网页设计［J］.微型计算机及其应用，2014，33(3)：6566。

［5］他. ［EB/OL］.(20150918)［20161220］

[6]余宜生.移动终端网页优化处理研究[J].电子技术应用, 2014, 40(7): 126129.

[7] 高继荣，田岩，蒋小燕。基于树结构的网页适配方法研究[J].微型计算机及其应用，2014，33(1)：7780。

［8］ C. ［EB/OL］指南。 (20151012)［20161220］//css/aguideto/.

［9］ ALLEN R.仅CSS的类型及更多［EB/OL］.(20151013)［20161220］@/typewithonlycss#. xwa。

[10]。简介[EB/OL]。 (2015-12-01) [2016-12-20]

# 正定网站推广价格  # seo股票是什么意思  # 百度竞价被seo  # 贵州seo网站关键词优化工具  # 微源seo  # 怎么营销小黄车推广产品  # 品牌网站推广优惠火7星  # 南昌seo公司首选11火星  # 襄阳SEO排名源头厂家  # SEO链轮  # 台州优化关键词排名网站  # 可以自动  # 宜昌seo推广哪里做  # 安徽网站推广质量保证  # 平川网站推广公司有哪些  # 章丘seo服务  # seo教育培训机构优化  # 潍坊网站建设建站系统  # 整合营销及推广外包方案  # 南通网站推广好不好  # 网店网站建设教程视频  # 它是  # 互联网  # 网页设计  # 终端设备  # 如图  # 所示  # 还可以  # 多个  # 自适应  # 及其应用  # 响应式设计在B2C电子商务网站中的应用与实现研究  # 后端  # 可以通过  # 线上  # 未来  # 用户提供  # 较小  # 主要包括  # 上海  # 商务网站 

相关文章： 深入解析广东百度推广宣传助力企业腾飞,本地高端网站建设开发  app运营精细化如何做？这三个核心指标务必明确！  广州百度推广问题解析与解决方案,忠县做网站建设  想要通过网络营销引流获客？这10种最常见的方法必须掌握！  广州百度推广多少钱一个？全面解析推广费用与影响因素,无锡品牌网站建设条件  想通过国外广告联盟赚钱？这10个专业术语你必须了解！  广东百度推广发展的现状与未来趋势,网站快速推广软件  广州百度推广的目的与意义,晋州软文网站推广方案  广州百度推广关键词技巧解析，让您的营销更高效,潼南区网站推广公司  广州百度推广系数解析及优化策略,各大营销推广的优势  在广告联盟平台推广项目赚钱有哪些优势？  掌握了这9个推广的qq沟通技巧，轻松提高转化率！  遇到一些“做任务”的推广你可要小心了，很容易被骗！  广东百度推广提成机制解析与优化建议,青岛网站建设高端贵不贵  广州百度推广好吗？深入解析其优势与效果,汽车搜索网站建设  广东百度推广增量，助力企业发展新航向,雨花区旅游网站建设方案  非常适合网赚新手做的7个网络赚钱项目介绍！日赚500不是问题！  广州百度推广开户多少钱？全面解读费用与价值,网站推广岗位职责及要求  是什么？赚钱的思路又是什么？  下班后做什么赚钱项目可以日赚500+?我来告诉你！  广州百度推广名片，助力企业数字化营销的必备工具,江门营销推广哪里好  广告联盟上日赚1000+的方法和经验分享!  想要让目标用户知道你的产品，这七种免费的网站推广方法必须掌握！  社交app推广引流的6大方式  社交app如何利用社交新媒体快速进行app推广引流？  广州百度推广投资，企业发展的明智选择,河南推广大数据营销  联盟广告和SEM竞价广告、信息流广告以及DSP广告四者之间有什么不同？  如何利用抖音推广小游戏来赚钱？  通过qq群营销、微信营销、网站营销等方式售卖网络课程月入过万项目分享！  深度剖析，广东地区百度推广资料如何高效运用,深州企业网站推广公司  广州百度推广设计，助力品牌精准营销的秘诀,英文版网站建设服务  【干货】小白如何在百度联盟上月赚3000+？实操经验分享  日赚500的项目都有哪些？这里推荐你做这2个！  福建百度推广点击率高却无人加好友，问题出在哪？,网站推广语句  全民|直播|时代到来，|直播|赚钱真的很轻松吗？  广州百度推广开户费用如何选择最合适？,建设优秀网站步骤  广东百度推广定价解析，提升本地企业线上竞争力,大良建材网站建设  移动互联网下手机广告联盟​营销存在着哪些问题？  广州百度推广目标，助力企业精准营销,软文营销的广告推广  广东百度推广应用的现状与未来展望,网站建设流程详细步骤  福建百度推广预算，一天需要多少？,房产资源推广网站  揭秘引流项目之百度贴吧诱导引流项目的玩法和思路！  如何通过推广赚钱？推广赚钱的项目有哪些？  广州百度推广关键词搭建指南,微软营销推广方案是什么  广州百度推广能接到单子吗？深入解析与实战经验分享,金*站的建设  广州百度推广服务费可以不交吗？详解推广费用与运营模式,海珠品牌网站推广方案  广告联盟计费方式之联盟广告推广计费有哪些优势？  在微信公众号上投放cpc广告需要注意的几点问题，否则赔了夫人又折兵！  广东百度推广教程，掌握高效引流技巧,武汉知名营销推广商会  广告有哪些优点和缺点？ 

相关栏目： 【 广告资讯37196 】 【 广告推广143353 】 【 广告优化89630 】