响应式web设计关键技术和设计流程

《响应式web设计关键技术和设计流程》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、响应式Web设计关键技术和设计流程　　摘要：适应移动互联网Web设计需求，从Web设计实践出发，解析了响应式Web设计的媒体查询、流动布局和弹性视觉媒体三大关键技术，提出了响应式Web设计流程，为实现“一源多屏”Web设计提供了解决方案，为移动互联网设计和重构提供了技术框架和路径。关键词：响应式；CSS3；Web设计中图分类号：TP3文献标识码：A文章编号：1009-3044（2014）05-1066-03ResponsiveWebDesignKeyTechnologyandDesignProcessZHAOJian-bao（DepartmentofComput

2、erScience，GuangdongAIBPolytechnicCollege，Guangzhou510507，China）Abstract：WebdesignneedstoadapttothemobileInternet，fromWebdesignpractice，parsingtheresponsiveWebdesignmediaqueries，fluidlayoutsandvisualmediaelasticitythreekeytechnologies，proposedresponsivewebdesignprocesstoachieve“asourc

3、emulti-screen”webdesignsolutions，providedthetechnicalframeworkandpathforthe12mobileInternetdesignandReconstruction.Keywords：Responsivewebdesign；CSS3；Webdesign根据CNNIC第32次互联网络发展状况调查结果，截至2013年6月，中国手机网民的总规模达4.64亿。其中，手机浏览器用户规模为3.69亿，同比增长21.0%，在手机网民中的渗透率为79.125%[1]，手机网民正在以前所未有的速度增长。与此同时，上网

4、设备已经不仅仅是手机、平板电脑、PC，小到眼镜、手表，大到电视、冰箱都可以上网，上网设备显示屏物理尺寸不同，输入模式不同，操作系统不同，浏览器内核及版本不同，导致不一致的窗口宽度、屏幕分辨率、用户参数和用户字体，上网设备碎片化趋势明显[2][3]。目前，Web设计中普遍使用固定宽度（如960像素）为所有终端用户提供一致的用户界面，在显示屏分辨率趋于一致时显示很好，但在大尺寸高分辨率显示器上会显示高达50%空白区域，而在移动终端上页面大小不能匹配终端屏幕大小，页面布局不能自适应调整，无法按100%比例显示页面宽度，出现水平滚动条，寻求标准分辨率越来越困难[4][5

5、]。理想情况下，Web设计应该根据用户显示屏分辨率定制多个版本，以提供最佳用户浏览体验，但会导致网站建设与维护工作量成倍增长，建设周期明显延长，建设费用成倍增加[6]。在此背景下，Web设计师应顺势而为，勇于面对上网设备的多样性，放弃在不同平台的不同浏览器上网页效果完全一致性的追求，设计能自适应用户终端设备的网站。响应式网页设计（ResponseWebDesign），整合媒体查询、弹性视觉媒体和流动布局，有助于解决不同上网设备的适配性问题，使网站兼容多种设备和屏幕，实现“一源多屏”。1关键技术响应式设计整合了媒体查询、弹性视觉媒体和流动布局[7]，媒体查询实现按

6、设备特性来分级控制页面布局，弹性视觉媒体实现视觉媒体按照特定布局的动态调整，使用流动布局能创建可缩放、可流动的弹性版式，三者构成了响应式设计的核心技术。1.1媒体查询在CSS2.1媒体类型允许为显示器（screen）、打印机（print）、电视机（tv）等媒体定义样式，W3C在CSS3中加入了媒体查询（Media12Queries）模块，不但支持定义媒体类型，而且支持上网设备的物理特性的检测。没有CSS3的媒体查询模块，就不能针对设备特性匹配特定的CSS样式。媒体查询根据媒体类型、屏幕宽度、屏幕比例、设备方向（横向或纵向）等各种功能特性来改变页面布局，而不仅仅像

7、CSS2.1的只是媒体类型。Web设计者只需要针对不同的屏幕分辨率等级来编写不同的页面布局样式，然后上网设备会根据自身的屏幕分辨率来选择一种适合页面的布局，从而改善用户浏览体验。媒体查询表达式由设备类型和一个或多个检测媒体特性的声明构成，声明由媒体特性名称和值构成，中间用冒号“：”分隔[8]。媒体查询的语法为：“@media媒体类型and（媒体特性）{样式代码}”，其中媒体类型常用的有all（所有设备）、screen（电脑显示器）、print（打印机或者打印预览）和tv（电视机）。CSS3中定义的媒体特性共有13种，分别是视口宽度width、视口高度height

8、、设备屏幕分辨率宽度de