（1.东华大学 信息科学与技术学院，上海 201620；2.数字化纺织服装技术教育部工程研究中心，上海 201620）
0引言
响应式网页设计（RWD）是2010 年伊桑·马克特（Ethan Marcotte）提出的。该技术是三种已有新技术——流动布局（fluid grids）、媒介查询（media queries）和弹性图片（scalable images）的结合［3-4］。通过响应式的设计模式，能够使网站随着不同终端而做出自动的响应，动态地改变网页的布局和元素的样式，将同样的内容在不同终端下漂亮地呈现出来，如图1所示。
1响应式网站的设计方法
在使用移动设备浏览网页时，大多数浏览器会默认显示普通页面的尺寸。由于移动设备的分辨率较小，页面元素会显得不清晰。为此，可以使用viewport meta 标签，它是一个虚拟“视窗”，能够自动响应移动设备的宽和高，让页面的字体和图片自适应地变得清晰。
<meta name="viewport" content="width=devicewidth,height=deviceheight,initalscale=1.0,maximumscale=1.0,userscalable=no;" />
@media查询可以针对浏览器不同的视窗大小而设置不同的CSS样式，当网页在不同的终端设备上浏览时，页面就可以响应不同的页面布局，其CSS语法如下：
也可以针对不同的设备使用不同的stylesheets:
测试效果如图2和图3所示。
常规布局一般是基于块和内联流的布局方式，其方向是一定的，缺乏灵活性。而Flexbox采用flexflow流的布局方式，它可以多方向布局网页元素：从左到右，从右到左，从上到下，从下到上。
考虑到浏览器的兼容性，任何容器只要加入下面语法就可以指定为Flex布局。
然后通过设置不同子元素的属性就可以创建出响应式的弹性布局，测试效果如图4、图5和图6所示。
1.4.1响应式文字
分别用vw、vh表示高度和宽度，一个单位等于视窗大小的1%。也可以通过vmin和vmax设置最大值和最小值（如：1vmin取1vw和1vh小的值）［9］。
为了使图片能响应浏览器的视窗大小，只需要为图片设置下面的CSS样式即可：
1.5响应式框架
通过使用jQuery Mobile 可以 “写更少的代码，做更多的事情”，它可以通过一种灵活、简单的方式来布局网页［10］。要使用jQuery Mobile开发网页，需要在网页中引用 Javascript 库 (.js)、CSS样式表（.css）。
<head><link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jqu ery.mobile.min.css">
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script></head>
2.1项目简介
2.2系统设计
前台（客户购买）部分：针对用户系统，主要包括注册会员、登录、查询服装、添加购物车、生成订单及支付功能。
根据系统功能分析，设计系统前端功能模块如图7所示。
本文从实际问题出发，针对网站开发过程中存在的问图7系统前端功能模块图
随着越来越多的移动终端加入到互联网中，移动互联网已占有Internet的半壁江山。响应式网站可以给用户提供更加舒适的界面和用户体验，已成为大势所趋。虽然响应式网页设计的优点和趋势已经被广泛地认同，但是由于许多前端工程师还对其不太熟悉，对响应式网站的设计模式还有许多技术上的难题，如对老版本IE支持不好、加载时间长等，因此它在短时间内很难普及。但可以肯定，为了迎合未来移动互联网的发展潮流，响应式网页的设计将会是未来网站设计的主流。
［1］ 三川. CNNIC发布第35次《中国互联网络发展状况统计报告》［J］.中国远程教育，2015(2):3131.
［3］ 张欣辉. 响应式网页设计的研究［J］. 电子技术与软件工程，2014，40(18):5757.
［5］ He Yuchan. Status and trends of responsive Web design［EB/OL］.(20150918)［20161220］http://heyuchan.com/?p=720.
［7］ 高集荣, 田艳, 江晓妍. 基于树结构的Web页面适配方法的研究［J］. 微型机与应用，2014，33(1):7780.
［9］ ALLEN R. Responsive type and more with only CSS［EB/OL］.(20151013)［20161220］https://medium.com/@ryanallen_com/responsivetypewithonlycss82b846370cc9#.4pa3sr xwa.
［10］ W3CSCHOOL.jQuery mobile简介［EB/OL］.(20151201)［20161220］http://www.w3school.com.cn/jquerymobile/jquerymobile_intro.asp.
