响应式Web 设计方法的研究

邢 希，田兴彦，王世运

(琼州学院电子信息工程学院，海南 三亚 572022)

0 引言

随着时代的发展，网络用户使用小屏幕设备(如平板电脑、手机)上网已成为趋势，另外，超大屏幕的显示器也在快速普及，从而导致上网设备的尺寸差距与日俱增.面对形形色色的终端，千差万别的屏幕分辨率，目前的网页设计方法显得有些力不从心，而我们不太可能为每种设备专门设计一套网站.在这样的环境下，采用基于HTML5 和CSS3 技术的响应式网页设计方式应运而生.

响应式网页设计(Responsive Web Design)结合了媒体查询、流式布局和弹性图片等技术手段，是能针对任意设备对网页内容进行完美布局的一种显示机制［1］.通过响应式的设计方式，能使网站页面随浏览设备的不同而自行响应，动态调整布局结构和元素的规格样式，将相同的内容以不同的布局呈现给不同终端的用户.如图1 所示.

图1 响应式网页设计概念图

1 CSS3 中的媒体查询模块

媒体查询是响应式网页设计方法的核心，由媒体类型和检测媒体特性的条件表达式组成，可以让CSS更加精确作用于不同的媒体或同一媒体的不同条件.

1.1 媒体查询使用方法［2］将如下代码片段插入某个CSS 文件中:

预览与之相关联的页面并不断调整浏览器窗口宽度.页面的背景颜色会根据当时的窗口宽度发生相应变化.比如:当宽度不超过320px 时，页面背景颜色为绿色;当宽度在320px～550px 之间时，背景颜色为蓝色，以此类推.

另外，还可以通过＜link＞标签中的media 和href 属性来为某种特定的设备指定相应的样式.比如要指定窗口宽度大于800px 的纵向放置显示屏相应的样式表，可通过如下所示代码片段引入:

1.2 媒体查询可检测到的特性 媒体查询最常用于检测获取设备的可视区域宽度(width)，设备屏幕宽度(device-width)和设备的手持方向(orientation)，除此之外，还有画面宽高比(aspect-ratio)，每种颜色的位数(color)，颜色索引表(color-index)和设备分辨率(resolution)等等.大部分特性都可以搭配max 和min 前缀来限定一个查询范围.

1.3 浏览器的兼容性问题［3］IE 浏览器(IE9 以下版本)并不支持CSS3 的媒体查询，因此可以通过JQuery 脚本来实现媒体查询相关特性.引入JQuery 后，用它获取浏览器窗口的宽度，代码如下:

然后通过条件语句判断screenWidth 的值是否在某宽度范围内，从而实现媒体查询中“max-width”和“min-width”的划定范围的功能.

另外，也有很多能给老版本IE 添加媒体查询支持的垫片脚本，比如Scott Jehl 开发的Respond.js 使用起来就非常方便，直接在页面文件中引入即可.

2 流式布局

网页仅通过媒体查询来划分窗口宽度范围，会从一组查询规则突变至另一组，中间没有经过平滑的渐变;而且会导致规则宽度范围之外的页面需要水平滚动才能完整浏览，具有一定的局限性.为了解决这个问题，我们需要使用由百分比定义网页内容宽度并设置CSS 浮动属性的流式布局［4］.

2.1 百分比布局 当前，设计和制作网页的习惯都是采用具体的尺寸，当用户缩小浏览器窗口时，就会发现一部分网页内容没有出现，并且需要移动水平滚动条才能看到被遮住的内容.要制作响应式的网页，就需要将固定尺寸转换为相对尺寸.Ethan Marcotte 提供了一个简易的转换公式:目标元素宽度÷父级元素宽度=百分比宽度.比如，如果定义一个div 的宽度为div#sub_nav {width:80%}，那么div#sub_nav 的宽度就是其父级元素宽度的80%.这样无论浏览器的大小如何改变，div#sub_nav 的宽度也始终和其父级元素保持这个比例关系，达到一个自适应的效果.需要注意的是，要保证元素都是使用百分比定义宽度，这样就能使页面在任意尺寸的设备中以一致的布局方式呈现.

2.2 设置CSS 浮动属性 由于某些特殊的要求，有时我们会希望页面中的内容宽度是固定值，比如左内容栏(div#left)为300px，右内容栏(div#right)为300px，为了解决缩小窗口后部分内容会被隐藏的问题，可以给左右内容栏都设置浮动属性:div#left，div#right {width:300px;float:left;}，这样会出现双栏布局，当父级元素的宽度小于600px 时，右内容栏会因为空间不够而跑到左内容栏的下面，形成单栏布局，从而防止了内容被隐藏，出现水平滚动条的情况.需要注意的是浏览器窗口小于300px 时页面内容还是会被隐藏，因为左右内容栏的宽度都不是用百分比来定义的.

3 自适应的文字和图片

响应式页面设计中除了页面结构可以自适应缩放之外，文字和图片也要能相应地实现大小随窗口尺寸自适应变化.

3.1 用em 替换px 使用em 替换px 是为了实现文字的自适应缩放，可以给响应式网页的设计、开发和维护带来很多便利.em 的大小也是相对其父级元素的字体大小而言的，同样，“目标元素尺寸÷父级元素尺寸=百分比尺寸”这个公式也适用于将文字的固定尺寸转换为相对尺寸.如果将＜body＞标签中的文字设置为100%，其他文字都使用相对单位em，那么这些文字都会受body 中设置的影响.

3.2 弹性图片［5］要让图片自适应缩放.使用CSS 的max-width 属性来实现弹性图片是比较常用的做法.如设置img {max-width:50%}，就可以使图片自动缩放到与其容器按50%的比例匹配.需要注意的是，图片尺寸需要比其显示尺寸更大以保证渲染效果，否则图片会因过度拉伸而变得模糊，另外最好给弹性图片追加一个阈值，如一张图片的实际宽度为200px，则可以设置img {width:50%;max-width:200px;}，这样就可以保证图片的自由缩放，而且也不会超出正常显示的尺寸范围.

弹性图片存在一定的问题，由于需要图片尺寸比其显示尺寸大，导致不管什么设备，都要下载超大的图片.为了解决这个问题，兼顾小屏幕和大屏幕，引进了“响应式图片”的概念.

3.3 响应式图片［6］“响应式图片”的思想是由Filament Group 提出的，能解决上面提到的问题:同比的缩放图片，且在小设备上能降低图片的分辨率.大致原理是利用js 脚本来检测当前设备的屏幕分辨率，根据检测结果给大屏幕设备添加BASE 标记，并将相应的图片、脚本和样式表加载请求定向到一个虚拟路径“/rwd-router”.服务器端接收到请求后决定使用原始图片还是小尺寸的“响应式图片”，并进行相应的反馈输出.

4 结束语

随着移动技术的普及，越来越多的人会通过不同的屏幕来浏览网页，过去以桌面电脑为中心的设计思想，要逐渐转变成为未知设备而设计的思想.响应式网页设计就是一套可靠且面向未来的解决方案，它将提供良好的设计效果和最佳的使用体验.

［1］Frain B.Responsive Web Design with HTML5 and CSS3［M］.Birmingham:Packt Publishing，2012:10-11.

［2］Jonathan Stark.Building iPhone Apps with HTML，CSS，and JavaScript［M］.USA:O＇Reilly Media，2010:16-17.

［3］许中博.“响应式”网页布局设计浅析［J］.黑龙江科技信息，2012(26):106.

［4］Dan Cederholm(著)，刘建宁(译).无懈可击的Web 设计——利用XHTML 和CSS 提高网站的灵活性与适应性(第二版)［M］.北京:清华大学出版社.2009:195-238.

［5］Zoe Mickley Gillenwater.Flexible Web Design:Creating Liquid and Elastic Layouts with CSS［M］.USA:New Riders，2009:285-312.

［6］Scott Jehl.Responsive Images:Experimenting with Context-Aware Image Sizing EB/OL］.http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/.2010-12-14.