校园响应式网页设计应用研究

谢日敏　郑佳芳

摘要：该文阐述了响应式网页设计的主要技术特点，并对基于响应式网页设计理念的前端框架进行比较分析，为解决在各类终端设备上进行跨平台的网页自适应问题提供了新思路。

关键词：响应式网页设计

图分类号：TP393.092 文献标识码：A 文章编号：1009-3044（2015）14-0209-02

Abstract： This paper described the main technical characteristics of responsive web design. comparison of different front-end frameworks based on the concept of responsive web design. The purpose of the study to solve the problem on all kinds of terminal equipment for the cross-platform web adaptive provided a new way of thinking.

Key words： responsive web design

随着互联网的发展，移动版的网站得到广泛的青睐。用户希望能够开发一种兼容性强的web应用，即可以适应Iphone手机、Andriod手机、PC机及平板电脑等终端应用，又具有良好的用户体验。传统的web设计是针对不同的终端，依据用户需求开发不同终端页面效果。因此，对设计开发人员而言，将大量的精力放在了业务应用表现层的复杂设计上。Ethan Marcotte 在2010 年提出响应式网页设计（Responsive Web Design），为不同终端用户提供了更友好的用户体验[1]。

1 响应式网页设计

响应式网页设计针对不同的屏幕尺寸和系统平台，能够及时响应用户行为情景。当用户从便捷电脑转换到平板电脑时，页面的图片大小和脚本功能 能够自动适应用户体验。也就是，网站能够自适应用户的喜好，其主要消除了为适应新终端的业务应用，而重新进行页面设计的重复作业[2]。

响应式网页设计不只是屏幕分辨率可调和图像大小自动调整，而是一种全新网页设计思维方式。现有响应式设计技术主要包括以下特征[3-4]：

1）移动优先（Mobile First）

移动优先是响应式网页设计中性能设计的重要组成部分。在响应式网页设计中，网页最主要的部分是设计为移动优先，使得敏感的设计是以桌面网站的方式或类似的隐藏技术来替换，从而提升用户体验感觉。

2）层叠样式转换和媒体查询（CSS Transitions and Media Queries）

使用层叠样式转换和媒体查询依据浏览器的宽度，实现自适应页面布局，从而查阅网站内容时，可以快速无缝的在不同页面风格之间进行跳转。

3）响应式数据表（Responsive Data Tables）

传统数据表从PC端转换到移动端，往往由于缩小整个数据表，导致字体变化而不可阅读。响应式数据表就是要重新格式化表，使其具有更好的可读性。

4）响应式导航菜单（Responsive Navigation Menus）

在终端屏幕缩小时，原有固定横向菜单的链接方式转换为一种下拉式菜单，替换原有的菜单项。

5）流式布局（Fluid Layouts）

以往有四种不同的布局类型：固定宽度的布局，液态布局，弹性布局和混合布局，其各有优缺点。流式布局通过设置布局的百分比以及CSS 的浮动属性等技巧使得响应式网页设计更加灵活。

6）响应式图像（Responsive Images）

响应式图像采用一种上下文感知图像尺寸方式，为不同分辨率下图像尺寸不同布局的情况，提供背景图像尺寸响应优化方法。

由于响应式网页设计近几年才发展起来，各类技术还需不断的进行优化和改进，但随着类似Google企业也建议优先采用响应式设计，使得更多的团队加入到响应式网页设计研发当中，出现了不少基于响应式网页设计理念的前端框架。

2 前端框架比较分析

通过表1对主流响应式网页设计的前端框架进行比较分析，表明Bootstrap在国内外具有较高的支持度，而支持语义化的Semantic UI在国外具有较强的竞争优势[5]。

4 结束语

校园响应式网页设计，必须从流行性、可持续发展、成熟的特点以及完善的文档支撑进行考量。在项目实践过程中，响应式网页设计必须与相关网站开发产品进行集成，解决各类终端界面自适应问题，增强网站的可持续性和可维护性。

参考文献：

[1] Marcotte E. Responsive web design[M]. Editions Eyrolles， 2011.

[2] Knight K. Responsive web design： What it is and how to use it[J]. Smashing Magazine， 2011.

[3] Frain B. Responsive web design with HTML5 and CSS3[M]. Packt Publishing Ltd， 2012.

[4] Fielding J. Beginning Responsive Web Design with HTML5 and CSS3[M]. Apress， 2014.

[5] Jain N. review of different responsive css front-end frameworks[J]. Journal of Global Research in Computer Science，2015，5（11）：5-10.