响应式Web设计关键技术及设计流程

赵建保

摘要：适应移动互联网Web设计需求，从Web设计实践出发，解析了响应式Web设计的媒体查询、流动布局和弹性视觉媒体三大关键技术，提出了响应式Web设计流程，为实现“一源多屏”Web设计提供了解决方案，为移动互联网设计和重构提供了技术框架和路径。

关键词：响应式；CSS3；Web设计

中图分类号：TP3 文献标识码：A 文章编号：1009-3044（2014）05-1066-03

Responsive Web Design Key Technology and Design Process

ZHAO Jian-bao

（Department of Computer Science，Guangdong AIB Polytechnic College，Guangzhou 510507，China）

Abstract： Web design needs to adapt to the mobile Internet， from Web design practice， parsing the responsive Web design media queries， fluid layouts and visual media elasticity three key technologies ，proposed responsive web design process to achieve "a source multi-screen" web design solutions ， provided the technical framework and path for the mobile Internet design and Reconstruction.

Key words： Responsive web design； CSS3； Web design

根据CNNIC第32次互联网络发展状况调查结果，截至2013年6月，中国手机网民的总规模达4.64亿。其中，手机浏览器用户规模为3. 69亿，同比增长21. 0%，在手机网民中的渗透率为79. 5%[1]，手机网民正在以前所未有的速度增长。与此同时，上网设备已经不仅仅是手机、平板电脑、PC，小到眼镜、手表，大到电视、冰箱都可以上网，上网设备显示屏物理尺寸不同，输入模式不同，操作系统不同，浏览器内核及版本不同，导致不一致的窗口宽度、屏幕分辨率、用户参数和用户字体，上网设备碎片化趋势明显[2][3]。目前，Web设计中普遍使用固定宽度（如960像素）为所有终端用户提供一致的用户界面，在显示屏分辨率趋于一致时显示很好，但在大尺寸高分辨率显示器上会显示高达50%空白区域，而在移动终端上页面大小不能匹配终端屏幕大小，页面布局不能自适应调整，无法按100%比例显示页面宽度，出现水平滚动条，尋求标准分辨率越来越困难[4][5]。理想情况下，Web设计应该根据用户显示屏分辨率定制多个版本，以提供最佳用户浏览体验，但会导致网站建设与维护工作量成倍增长，建设周期明显延长，建设费用成倍增加[6]。在此背景下，Web设计师应顺势而为，勇于面对上网设备的多样性，放弃在不同平台的不同浏览器上网页效果完全一致性的追求，设计能自适应用户终端设备的网站。响应式网页设计（Response Web Design），整合媒体查询、弹性视觉媒体和流动布局，有助于解决不同上网设备的适配性问题，使网站兼容多种设备和屏幕，实现“一源多屏”。

1 关键技术

响应式设计整合了媒体查询、弹性视觉媒体和流动布局[7]，媒体查询实现按设备特性来分级控制页面布局，弹性视觉媒体实现视觉媒体按照特定布局的动态调整，使用流动布局能创建可缩放、可流动的弹性版式，三者构成了响应式设计的核心技术。

1.1 媒体查询

在CSS2.1媒体类型允许为显示器（screen）、打印机（print）、电视机（tv）等媒体定义样式，W3C在CSS3中加入了媒体查询（Media Queries）模块，不但支持定义媒体类型，而且支持上网设备的物理特性的检测。没有CSS3的媒体查询模块，就不能针对设备特性匹配特定的CSS样式。媒体查询根据媒体类型、屏幕宽度、屏幕比例、设备方向（横向或纵向）等各种功能特性来改变页面布局，而不仅仅像CSS2.1的只是媒体类型。Web设计者只需要针对不同的屏幕分辨率等级来编写不同的页面布局样式，然后上网设备会根据自身的屏幕分辨率来选择一种适合页面的布局，从而改善用户浏览体验。媒体查询表达式由设备类型和一个或多个检测媒体特性的声明构成，声明由媒体特性名称和值构成，中间用冒号“：”分隔[8]。媒体查询的语法为：“@media 媒体类型 and （媒体特性） {样式代码}”，其中媒体类型常用的有all（所有设备）、screen（电脑显示器）、print（打印机或者打印预览）和tv（电视机）。CSS3中定义的媒体特性共有13种，分别是视口宽度width、视口高度height、设备屏幕分辨率宽度device-width、设备屏幕分辨率高度device-height、设备方向orientation[portrait | landscape]、视口宽高比aspect-ration、设备屏幕分辨率宽高比device-aspect-ratio、设备支持的每像素色彩位数color、设备的颜色索引表中的颜色数color-index、黑白屏幕设备每个像素的所使用的位数monochrome 、屏幕或打印机分辨率的resolution、电视机扫描方式scan[progressive | interlace]、输出设备是栅格还是位图grid[0|1]。可使用and关键词组合媒体类型和媒体特性值条件，在媒体类型前面或媒体特性前面加not对后面的表达式取反，加逗号“，”在一系列表达式其中一个真时则为真，加only使不支持媒体查询的浏览器忽略本条查询，“{ }”中书写CSS规则。例如 “@media screen and （min-width： 480px） {}”表示视口宽度小于480px适用，“@media screen and （min -width： 480px） and （max -width： 768px） {}”表示视口宽度大于480px但小于768px适用，“@media screen and （max-width： 960px） {}”表示视口宽度小于960px适用，“@media screen and （min-width： 1420px） {}”表示视口宽度大于1420px适用，这时可能要考虑设置max-width属性限制内容区的最大宽度，或者增加列数来填补大量的空白区域[9][10]。响应式Web设计最为常见的是检测上网设备的width特性值，设定视口宽度的级数取决于用户群体终端设备碎片化程度和视觉设计需求，需为不同终端级别宽度定制相匹配的样式，做到宽度连续覆盖。另一种设计思路强调以界面为主导，解除断点设置跟上网设备分辨率的直接关联，断点数量及参数完全根据内容来决定，也就是根据网站的图文版式的变动临界点来设置。

响应式Web布局设计时，媒体查询顺序采用从移动端向上设计，优先建立移动设备用户体验，然后针对更大屏幕的显示器进行调整，以避免移动终端对媒体查询的支持不完善，也就是，在样式表的开头定义基本样式，然后使用媒体查询从低分辨率到高分辨率来重写样式以覆盖前面定义的样式[11]。

为减少HTTP请求数量，建议将媒体查询样式尽可能写在同一个文件中。对于较复杂的网站，可以采用外部样式表，通过标签链接到网页文件，如“”，实现当视口宽度大于等于960px时载入外部样式表gt-960px.css。

目前，移动终端浏览器一般都能比较好支持CSS3，不需要考虑响应式布局的媒体查询兼容问题，为实现IE9以下的浏览器媒体查询兼容性，需在页面中插入css3-mediaqueries.js文件调用，代码如下：

<！—[if lt IE 9]>

<！[endif]—>

1.2 流動布局

媒体查询能适应不同设备和视口宽度，可以从一组CSS样式代码切换到另一组，但切换期间没有任何平滑过渡，会导致媒体内容要么过宽出现水平滚动条，要么过窄出现大量空白，尤其在切换临界点时布局会严重恶化。通过将固定像素布局转换成灵活的流动布局，确保在媒体查询未切换样式期间布局能适应视口改变。流动布局依靠浮动和百分比宽度来实现，浮动实现布局区块的动态重组，百分比宽度实现未到达断点时的区块宽度调整，以减少创建的断点数。浮动布局在固定宽度的Web设计中已经大量使用，在此不在赘述。将固定像素宽度转换成百分比宽度可套用公式：百分比宽度=目标元素宽度÷上下文元素宽度。例如，将原来#wrapper宽度为960px，#content宽度为940px，转换为百分比布局#content宽度97.92%，即940÷960=0.9792。

在网页文档标签中插入一个HTM5标签，设置基于WebKit内核的画布缩放参数，如 ，可实现页面在浏览器中以原始大小显示，禁止用户缩放。其中：width和height检测设备屏幕分辨率宽度和高度，initial-scale 设定初始的缩放比例，值为1时将根据浏览器可视区域实际大小来渲染页面。minimum-scale和maximum-scale指允许用户缩放到的最小比例和最大比例，user-scalable设定用户是否禁止缩放。

1.3 弹性视觉媒体

视觉媒体主要指文本、图形、图像、动画和视频等可视媒体。弹性视觉媒体设计的本质是确保视觉媒体适应版式布局的变化，确保页面上媒体的可读性。响应式Web设计时文本和其他视觉媒体实现方式不同。

弹性文本需将文本大小单位从px改为em， em的大小由上下文的定义的字体大小计算而来，是相对大小单位。使用em的好处在于：允许缩放文本和保持文本大小设计的灵活性。设计时通常给body标签设置font-size属性值后，给其他文本都使用相对单位em，使用相对单位的文本就会基于body的大小来计算字体大小。字体百分比尺寸计算跟百分比布局盒子计算方法相同，如上下文字体大小为16像素，当前文字大小为14像素，则字体大小0.875em，即14÷16=0.875。

图形图像、动画和视频的弹性设置使用“img，object，video，embed {width：100%； max-width：100%；}”，max-width属性用于设置媒体显示阈值，确保缩放时不会超出图片最大尺寸，同时应删除HTML插入媒体的标记中的width和height属性定义，如果要定义特定规格的媒体尺寸，可编写专用样式单独设置宽度，以覆盖上下文定义，使其仅作用于该媒体即可。另外一种限制内部媒体显示缩放比例的方法是给外层盒子设置max-width属性，通过限制外层盒子来间接控制内部媒体缩放尺寸。

在设计制作弹性视觉媒体时，仅考虑媒体放大到的极限情况会因此带来一个媒体文件整体偏大，使网站变得臃肿，需利用媒体压缩和优化技术来控制文件大小。另一种实现思路是通过JavaScript判断当前设备的分辨率，并根据预设的规则加载不同尺寸的图片文件。

2 响应式设计流程

2.1 确定需支持上网设备类型

上网设备调查可以帮助Web设计者了解用户使用的设备类型、屏幕尺寸、浏览器类型及版本[12]。上网设备类型主要调查移动终端（手机、平板）和上网本、笔记本电脑和PC，甚至是信息家电。屏幕尺寸调查主要掌握屏幕的尺寸和长宽比例。浏览器类型调查主要掌握浏览器类型、采用内核引擎及版本。通过调查最终确定出一份上网设备支持列表。响应式Web设计的目的在于针对不同设备的屏幕特性进行功能及内容的界面预设。对于用户不太明确的项目，可选择桌面显示器、iPad和主流智能手机作为主要代表性的设备，而不必顾全所有已知的设备规格类型。对于结构复杂，内容丰富的门户类网站，可以采用响应式设计与手机版、iPad版混合设计模式，对内容庞杂的页面做成手机版和iPad版，一般页面则统一采用响应式设计。

2.2 制作线框原型

确定出设备支持列表后，需要依据这些需求由Web设计师去设计线框原型。制作线框原型的作用是组织并呈现信息，要避免在视觉上过度的保真，它并不是细致的视觉设计，不是Web设计稿，跟字体、字号、配色、图片等无关。针对确定下来的分辨率级别分别制作不同的线框原型，需要考虑清楚不同尺寸下页面的布局变化过程，内容缩放过程，甚至针对特殊的环境作特殊化的设计等。线框原型完成后将图片导入到相应的设备进行测试，可以帮助设计者尽早识别潜在问题，测试内容包括可访问性、导航与表单的可用性、可读性等方面。对于较小屏幕设备，将全局导航与主要内容之间的部分高度压缩，或者采用可折叠设计，确保页面跳转后主要内容可以呈现在首屏中，以防引起用户误认为页面没有发成跳转。

2.3前端实现

线框原型经过测试后，交给视觉设计师和前端工程师具体实现，主要任务是页面布局实现、编写Media Queries、自动缩放图像、字体大小采用相对单位、调整移动互联设备浏览缩放默认规则和调试[13][14]，相比于传统的Web视觉设计过程，Web设计师必须时刻保持警惕，关注功能性组件的可用性、保证图文信息在所有设备中都容易辨读。前端工程师可以使用响应式前端开发框架，简化開发过程，确保开发网站具有跨浏览器、一致性、响应式等特点[15]。测试响应式布局可以安装iOS模拟器或者Android模拟器，也可以利用用户拖动浏览器时会触发判断条件的特性，把浏览器窗口缩小到一定尺寸就可以检测响应式布局是否生效。

3 结论

响应式Web设计为适应多样化的上网设备来设计，它通过整合媒体查询、流动布局和弹性视觉媒体技术，是一种采用灵活的、不针对特定上网设备的方法来进行Web设计，有效地解决了移动互联网用户终端设备碎片化问题，实现了“一源多屏”的现实需求。在响应式Web设计实践中，先确定Web设计所支持上网设备列表，然后制作线框原型并测试，再由前端工程师使用响应式布局开发框架完成网站设计与开发。开展响应式Web设计关键技术及设计流程的探究，能为Web设计师和前端工程师开展响应式设计和网站重构提供了技术框架和路径。

参考文献：

[1] 中国互联网络信息中心.2013年手机浏览器用户研究报告[R]. （2013-10-16）[2013-12-24].http：//www.cnnic.cn/hlwfzyj/hlwxzbg/ydhlwbg/201310/P020131016356661940876.pdf

[2] 百度.分辨率使用情况[EB/OL]. [2014-2-13]. http：//tongji.baidu.com/data/screen.

[3] 杨玉梅.浏览器CSS兼容问题探究[J].计算机与现代化.2013（7）：220-223.

[4] （英）弗雷恩.响应式Web设计：HTML5和CSS3实战[M].王永强译.北京：人民邮电出版社，2013.

[5] 杨叶，陈琳，董启标.响应式Web移动学习资源的技术实现与设计研究[J].现代教育技术.2013，23（6）：107-111.

[6] 佟延秋，彭江.基于Media Queries的精品课程网站重构研究[J].软件导刊.2013，12（2）：111-114.

[7] 邢希，田兴彦，王世运.响应式Web设计方法的研究[J].琼州学院学报.2013，20（2）：36-38.

[8] Ethan Marcotte .Responsive Web Design[EB/OL].（2010-5-25）[2013-12-18]. http：//alistapart.com/article/responsive-web-design.

[9] （美）卡德莱茨.响应式Web设计实践[M].侯鸿儒译.北京：人民邮电出版社，2013：67.

[10] 陆凌牛.HTML 5与CSS 3权威指南（第二版）[M].北京：机械工业出版社，2013：647.

[11] Rob Flaherty. Designing The Well-Tempered Web[EB/OL].（2012-1-17）[2013-12-24]. http：//uxdesign.smashingmagazine.com/2012/01/17/designing-well-tempered-web/.

[12] 马璇.智能移动终端自适应界面的一致性研究[D].北京：北京邮电大学，2013.

[13] 张树明.基于响应式Web设计的网页模板的设计与实现[J].计算机与现代化.2013（6）：125-127.

[14] 刘欢，卢蓓蓉.使用响应式设计构建高校新型门户网站[J].中国教育信息化.2013（9）：71-74.

[15] Bootstrp中文网.CSS·Bootstrap[EB/OL].[2014-2-8]. http：//v3.bootcss.com/css/#grid.