响应式Web设计

熊瑞英 王宁

摘 要：随着移动网络的崛起，用户使用终端设备（手机、平板）联网已成为一种趋势，这就要求网页能够自动切换分辨率、改变图片尺寸及相关脚本功能等，来适应不同设备——“响应式 Web 设计”就应运而生。该论文介绍了响应式 Web 设计的概念，并着重介绍实现响应式 Web 设计的关键技术，包括：弹性布局、弹性图片、媒体查询（Media Queries）和viewport属性。通过这些技术使网站能够动态地适应各类用户终端设备，从而满足各类用户的需求。

关键词：响应式 Web 设计 CSS3 弹性布局 弹性图片 媒体查询 视口

中图分类号：TP393 文献标识码：A 文章编号：1674-098X（2015）09（b）-0064-02

随着近几年移动网络的快速崛起，人们不在一味的选择电脑上网，为图方便，人们更倾向用手机、平板等终端基于各种移动网络进行联网。据中国互联网络信息中心CNNIC在2014年6月的统计，移动互联网用户规模已超过PC互联网用户规模。可见中国互联网正在朝移动方向发展，移动设备正在赶超PC设备，成为互联网的主要设备，但移动设备多元化，在这样的客观背景下，我们不得不解决：如何才能在不同的设备上呈现给用户同样的Web网页呢？

针对市面上流行的不同屏幕尺寸规格的iPhone、iPad、三星以及其他一些智能手机、平板电脑，与此同时，用户还可以改变屏幕窗口大小和转动设备来切换屏幕的定向方式。怎样做才能满足不同用户对这些设备的浏览需求？

1 响应式Web设计的概念

当前，大部分Web设计采用固定宽度的方式，为所有终端提供一致的用户界面，在电脑屏幕中能友好显示，而在移动终端的小屏幕中，页面布局不能自适应调整，无法按100%比例显示页面，出现水平滚动条，使用户不便浏览。针对这一问题，我们可以根据用户显示屏设计多个版本的网页，以供采用不同设备的用户浏览，但会导致网站建设及维护的工作量成倍增长，费用也会成倍增加。并且在未来的日子里，还会出现很多新的移动设备充斥市场。可见，为每种移动设备创建其独立版本的网页根本就是不切实际的。不过，有另外一种方式，可以让我们避免这种情况的发生。

既然不能为每种移动设备创建独立的网页，那么就让我们的网页来适应各种设备。在此思路下，Web设计师顺势而为，针对上网设备的多样性，设计能自适应用户终端设备的网站。让网页根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整，这就是响应式web设计。说的简单一点，就是为了省时省力省钱，一次性开发出来的网页，用同一个URL，能够根据不同终端设备，响应用户的操作自动调整网页尺寸。

2 响应式Web设计的关键技术

由于移动设备的多样性和用户操作的随意性，就要求页面具有很好的适应性，其布局结构要做到根据不同的设备规格、屏幕分辨率和用户操作进行响应调整。响应式Web设计是采用HTML5+CSS3技术实现一个网页对多种设备的兼容，下面我将介绍实现响应式Web设计的四大关键技术：弹性布局、弹性图片、媒体查询（Media Queries）和viewport 属性。

2.1 弹性布局

固定尺寸的网页不能满足设备的多样性，响应式Web设计采用弹性布局来满足不同设备的需求，即将固定尺寸设定为相对尺寸，其包括两个主要手段：百分比布局和设置浮动属性。

2.1.1 百分比布局

如果采用固定尺寸來制作网页，当用户缩小窗口或采用较小的设备来浏览时，就会发现部分网页内容没有显示，用户需要移动水平滚动条才能看全所有的内容。因此需要采用比分比页面宽度来实现弹性布局。

要实现网页的弹性布局，就需要将固定尺寸（px）换为以“%”为单位的相对尺寸，这样网页便能适应不同分辨率的设备了。Ethan Marcotte提出了转换公式： 目标元素宽度÷父级元素宽度=百分比宽度。例如，代码div#sub_nav { width： 75%}，该代码的功能是将宽度设置为父级元素宽度的75%。这样无论显示屏幕如何改变，宽度始终和其父级元素保持这个比例关系，从而保证了页面响应宽度的变化，同时不出现横向滚动条。

2.1.2 浮动属性

将网页中各个区块（div）的位置都是设置为浮动（float）的。这样可以解决当屏幕宽度不够，一行放不下多个区块的问题。例如将左内容栏（div#left）和右内容栏（div#right）分别设为250px，这样会出现双栏布局，针对缩小窗口后屏幕宽度不够造成部分内容会被隐藏的问题，可以通过代码为左右内容栏设置浮动属性来解决： div#left，div#right { width：250px； float： left； } ，该代码的功能是当父级元素的宽度小于 500px 时，右内容栏会因为空间不够而自动换行到左内容栏的下面，形成单栏布局，而不会在水平方向溢出。

2.2 弹性图片

图片在网页中一般按原始尺寸显示，但当显示宽度小于图片宽度时，图片该如何友好地显示呢？这时需要采用CSS3中的max-width属性实现弹性图片，让图片不失真地进行缩放，友好的显示出来。例如，代码img{max-width：，100%}，该代码的功能是使图片与显示窗口按 100%的比例自动缩放。确保图片最大的宽度的同时不会超过显示窗口的宽度，当显示窗口变窄时，图片的最大宽度值也会相应的减小，以使图片本身永远不会被页框边缘隐藏。

弹性图片使图片能随着显示窗口自动缩放，解决了大图片在手机等小屏幕设备上正常显示的问题。但是大图片还存在容量大的问题，采用移动终端联网时，我们不得不考虑流量问题？

这时我们可以考虑在PC上使用分辨率较大的图片，在移动终端上使用分辨率较少的图片，这就需要用到响应式图片。例如，代码：

该代码的功能是首先使用 JavaScript 脚本检测当前显示设备的屏幕分辨率，然后对检测到的屏幕分辨率进行判断，分辨率超过800*600的设备会加载大图片文件css1，否则加载小图片文件css2。这就需要我们预先针对同一副图片建立两个不同分辨率的样式文件。由此可见通过响应式图片可以实现根据屏幕尺寸调整图片分辨率，达到在移动设备上既能访问页面而又能减少流量的目的。

2.3 媒体查询

媒体查询是响应式web设计的核心，CSS3中的媒体查询指的是根据设备环境（系统平台、屏幕尺寸、屏幕定向等）加载不同的CSS文件来渲染页面的视觉風格。Web设计者只需要针对不同的屏幕分辨率等级来编写不同的页面布局样式，然后上网设备会根据自身的屏幕分辨率来选择一种适合页面的布局。这样就可以实现PC、平板、手机设备分别调用不同的CSS文件进行网页布局，从而实现完美的响应式设计。实现媒体查询可以通过link标签和@media 规则来实现。

2.3.1 link标签

link标签是指在 CSS 3中根据条件加载不同的CSS 文件。例如，代码：

该代码的功能是当视口宽度小于等于479px（手机屏幕）时加载样式文件479_screen.css进行页面布局；当视口宽度大于等于769px（PC屏幕）时加载样式文件769_screen.css进行页面布局。

2.3.2 @media 规则

@media规则是指在 CSS 3中根据条件加载不同的 CSS 选择器.例如，代码：

@media screen and （ max-width： 479px） { body { background： green； } }

@media screen and （min-width：480px）and（max-width： 768px）{body{background： yellow； }}

@media screen and （ min-width： 769px）{ body { background： blue； } }

该代码的功能是当视口宽度小于等于479px（手机屏幕）时页面背景颜色为绿色；当视口宽度在480px和768px之间（平板屏幕）时页面背景颜色为黄色；当视口宽度大于等于769px（PC屏幕）时页面背景颜色为蓝色。

2.4 viewport 属性

当用户采用不同设备访问网页时，通过媒体查询采用不同的页面布局完成响应式Web设计，但对移动终端的浏览器还存在一个问题，因为移动浏览器默认页面是为宽屏幕设计的，所以会把页面缩小来适应小屏幕，由此可见光靠媒体查询是解决不了移动终端设备的响应式Web设计的。这个时候就必须使用viewport的meta标签来做一系列的设置，从而获取终端设备正确的宽度。例如，代码：

该代码的功能是是自定义视口，指定视口宽度（width）为设备宽度（device-width），初始缩放比例（initial-scale）为1，禁止页面缩放（user-scalable），使用设备自身的分辨率（device-dpi）作为目标分辨率（target-densitydpi）。

3 结语

响应式Web设计通过弹性布局、弹性图片、媒体查询和viewport 属性等技术，实现了同一网站兼容多种设备和屏幕，即“一源多屏”。让网页自适应用户终端设备，极大程度的满足了各类移动终端用户的需求。现在响应式Web设计刚刚开始，它的路还很宽很长。

参考文献

[1] Responsive Web Design， by ETHAN MARCOTTE ，May 25 2010， Published in CSS， Layout & Grids， Mobile/Multidevice， Responsive Design， Interaction Design.

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

[3] （美）Alexis Goldstein.HTML5与 CSS3实战指南[M].北京：人民邮电出版社，2011.

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

[5] 李东博.HTML5+CSS3从入门到精通[M]. 北京：清华大学出版社，2013.

[6] 我国手机网民规模达5.27亿使用率首次超越PC[EB/OL].http：//tech.qq.com/a/20140721/043716.htm.