赵建保

摘要：适应移动互联网Web设计需求，从Web设计实践出发，解析了响应式Web设计的媒体查询、流动布局和弹性视觉媒体三大关键技术，提出了响应式Web设计流程，为实现“一源多屏”Web设计提供了解决方案，为移动互联网设计和重构提供了技术框架和路径。

关键词：响应式；CSS3；Web设计

中图分类号：TP3 文献标识码：A 文章编号：1009-3044（2014）05-1066-03

Responsive Web Design Key Technology and Design Process

ZHAO Jian-bao

（Department of Computer Science，Guangdong AIB Polytechnic College，Guangzhou 510507，China）

Abstract： Web design needs to adapt to the mobile Internet， from Web design practice， parsing the responsive Web design media queries， fluid layouts and visual media elasticity three key technologies ，proposed responsive web design process to achieve "a source multi-screen" web design solutions ， provided the technical framework and path for the mobile Internet design and Reconstruction.

Key words： Responsive web design； CSS3； Web design

根据CNNIC第32次互联网络发展状况调查结果，截至2013年6月，中国手机网民的总规模达4.64亿。其中，手机浏览器用户规模为3. 69亿，同比增长21. 0%，在手机网民中的渗透率为79. 5%[1]，手机网民正在以前所未有的速度增长。与此同时，上网设备已经不仅仅是手机、平板电脑、PC，小到眼镜、手表，大到电视、冰箱都可以上网，上网设备显示屏物理尺寸不同，输入模式不同，操作系统不同，浏览器内核及版本不同，导致不一致的窗口宽度、屏幕分辨率、用户参数和用户字体，上网设备碎片化趋势明显[2][3]。目前，Web设计中普遍使用固定宽度（如960像素）为所有终端用户提供一致的用户界面，在显示屏分辨率趋于一致时显示很好，但在大尺寸高分辨率显示器上会显示高达50%空白区域，而在移动终端上页面大小不能匹配终端屏幕大小，页面布局不能自适应调整，无法按100%比例显示页面宽度，出现水平滚动条，尋求标准分辨率越来越困难[4][5]。理想情况下，Web设计应该根据用户显示屏分辨率定制多个版本，以提供最佳用户浏览体验，但会导致网站建设与维护工作量成倍增长，建设周期明显延长，建设费用成倍增加[6]。……