响应式Web设计.doc

响应式Web设计.doc响应式 Web 设计摘要:随着移动网络的崛起,用户使用终端设备(手机、平板)联网已成为一种趋势, 这就要求网页能够自动切换分辨率、改变图片尺寸及相关脚本功能等, 来适应不同设备――“响应式 Web 设计”就应运而生。该论文介绍了响应式 Web 设计的概念, 并着重介绍实现响应式 Web 设计的关键技术,包括:弹性布局、弹性图片、媒体查询( Media Queries ) 和 viewport 属性。通过这些技术使网站能够动态地适应各类用户终端设备,从而满足各类用户的需求。关键词: 响应式 Web 设计 CSS3 弹性布局弹性图片媒体查询视口中图分类号: TP393 文献标识码: A 文章编号: 1674-098X ( 2015 ) 09(b) -0064-02 随着近几年移动网络的快速崛起,人们不在一味的选择电脑上网,为图方便,人们更倾向用手机、平板等终端基于各种移动网络进行联网。据 NIC 在 2014 年6 月的统计,移动互联网用户规模已超过 PC 互联网用户规模。可见中国互联网正在朝移动方向发展,移动设备正在赶超 PC 设备,成为互联网的主要设备,但移动设备多元化, 在这样的客观背景下, 我们不得不解决: 如何才能在不同的设备上呈现给用户同样的 Web 网页呢? 针对市面上流行的不同屏幕尺寸规格的 iPhone 、 iPad 、三星以及其他一些智能手机、平板电脑, 与此同时, 用户还可以改变屏幕窗口大小和转动设备来切换屏幕的定向方式。怎样做才能满足不同用户对这些设备的浏览需求? 1 响应式 Web 设计的概念当前, 大部分 Web 设计采用固定宽度的方式, 为所有终端提供一致的用户界面, 在电脑屏幕中能友好显示, 而在移动终端的小屏幕中, 页面布局不能自适应调整, 无法按 100% 比例显示页面, 出现水平滚动条, 使用户不便浏览。针对这一问题, 我们可以根据用户显示屏设计多个版本的网页, 以供采用不同设备的用户浏览, 但会导致网站建设及维护的工作量成倍增长, 费用也会成倍增加。并且在未来的日子里, 还会出现很多新的移动设备充斥市场。可见, 为每种移动设备创建其独立版本的网页根本就是不切实际的。不过,有另外一种方式,可以让我们避免这种情况的发生。既然不能为每种移动设备创建独立的网页, 那么就让我们的网页来适应各种设备。在此思路下, Web 设计师顺势而为, 针对上网设备的多样性, 设计能自适应用户终端设备的网站。让网页根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等) 进行相应的响应和调整, 这就是响应式 web 设计。说的简单一点, 就是为了省时省力省钱, 一次性开发出来的网页,用同一个 URL ,能够根据不同终端设备,响应用户的操作自动调整网页尺寸。 2 响应式 Web 设计的关键技术由于移动设备的多样性和用户操作的随意性, 就要求页面具有很好的适应性, 其布局结构要做到根据不同的设备规格、屏幕分辨率和用户操作进行响应调整。响应式 Web 设计是采用 HTML5+CSS3 技术实现一个网页对多种设备的兼容,下面我将介绍实现响应式 Web 设计的四大关键技术:弹性布局、弹性图片、媒体查询( Media Queries )和 viewport 属性。 弹性布局固定尺寸的网页不能满足设备的多样性, 响应式 Web 设计采用弹性布局