中图分类号：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。 (责任编辑：南粤论文中心)转贴于南粤论文中心: http://www.nylw.net(代写代发论文_毕业论文带写_广州职称论文代发_广州论文网）