响应式Web的设计.docVIP

响应式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