响应式网页设计案例实现与分析

吴多智， 陈益全

（琼台师范高等专科学校, 海南　海口　571127）



响应式网页设计案例实现与分析

吴多智， 陈益全

（琼台师范高等专科学校, 海南海口571127）

摘要：指出传统网站对各类智能移动设备的兼容性不足。介绍响应式网页设计的概念、设计思想、相关技术等。以实际案例讲解响应式网页的设计与制作流程。分析与总结响应式网页设计的步骤与技术要点，为响应式网站开发提供技术参考。

关键词：响应式网页设计；网页案例；网页制作；网页分析

一、引言

在当今移动互联网时代，人们更多的使用智能移动设备浏览网站。对于传统的针对显示器屏幕开发的网站，对各种屏幕尺寸不一的智能移动设备在兼容性方面表现出严重不足。其中一种解决方案是另外专门开发移动版网站，但会使得成本提高。另外一种解决方案是对原有网站按照响应式网页设计方式重构，让网站能够兼容各式各样的浏览器分辨率以及不同移动设备，而不是为每个终端做一个特定的版本，成本不高。响应式网页设计凭借其优势在越来越多的网站中被运用。本文以一个案例来讲解与分析响应式网页的设计实现过程，望能为网页前端工程师进行响应式网站开发提供参考。

二、响应式网页设计案例实现

（一）概念介绍

响应式网页设计(Responsive Web design)指页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。无论用户正在使用笔记本电脑、iPad还是智能手机，所要浏览的页面能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。

（二）设计思想

进行响应式网页开发，应遵循“移动优先、渐进增强”的设计思想。“移动优先”指由于移动设备尺寸多种多样，在布局与显示效果方面考虑较多，先针对移动设备进行设计，有利于提高响应式网页的开发效率。“渐进增强”指响应式网页从小屏幕向大屏幕的顺序进行开发，在小屏幕中，显示空间有限，网页要突出主要内容，表现方面有所简化，随着屏幕增大，网页表现的效果越来越丰富。“渐进增强”另一方面指让网页兼容各类版本的浏览器的情况下，为高级浏览器追加新效果以提高用户体验。

响应式网页在不同尺寸的设备中显示不同的布局。在进行网页布局设计时，绘制断点图是有效的方法，如图1所示。该断点图的含义是：屏幕尺寸小于640像素，显示（针对小屏幕的）单列布局；屏幕尺寸大于等于640像素且小于960像素，显示（针对中等屏幕的）双列布局；屏幕尺寸大于等于960像素，显示（针对大屏幕的）三列布局。

图1　响应式网页设计断点图

根据断点图，按照“移动优先、渐进增强”的设计思想，从单列布局、双列布局、三列布局的顺序进行制作，先使用DIV+CSS实现响应式布局，然后给页面中添加具体内容并美化页面，就能快速开发出兼容性良好的响应式网页。

（三）相关技术

开发响应式网页的技术包括常规网页开发的HTML、HTML5、CSS、JavaScript技术，还使用到了弹性图片技术和CSS3的Media Query（媒体查询）等。媒体查询是指通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。简单的理解就是媒体查询让网页根据设备屏幕尺寸显示单列布局、双列布局还是三列布局。

（四）编码实现

1.移动设备兼容

2.桌面浏览器兼容

IE8及以下版本浏览器不支持CSS媒体查询功能。要让CSS媒体查询起作用，可以把浏览器升级到IE9以上版本，或者加载外部JavaScript文件让IE8浏览器支持CSS媒体查询。参考代码如下：

3.网页单列布局实现

单列布局是网页在小屏幕设备（竖置各类手机、小型平板电脑）上的显示效果，其显示尺寸在640像素以下。这种布局让所有内容区域根据屏幕大小各显示为一列，其实现要点是：给所有元素设置宽度属性width:100%;。

在HTML文件中添加第一组div，给最外层的div命名为“all”，在它里面分成网页三个主要区域，头部“header”、主体“main”和底部“footer”。代码如下：

主要的CSS代码:.all{width:100%;max-width: 1000px;margin:0 auto;}表示该元素按照浏览器窗口大小自动调整自身宽度，但自身宽度最大为1000像素，同时该盒子居中显示。.header,.main,.footer {width:100%;}表示这三个元素同父元素一样宽度。

在header、main、footer这三个元素中添加新的div表示相应的内容区域，设置它们的CSS属性width: 100%并给height属性设置确定的值。在单列布局中，要让某个元素不显示就使用display:none;语句。

为了便于实时观察布局效果，要给每个布局div元素设置width、height、background属性。

4.网页双列布局实现

双列布局是在中等屏幕（横置大屏手机、平板电脑）设备上显示的效果。其显示尺寸范围在640像素到959像素之间。为达到兼容双列布局，CSS代码中要使用媒体查询功能，即添加语句@media screen and(min-width:640px)and(max-width:959px){/*双列布局的CSS代码全都写在此处*/}。双列布局的实现要点是：给双列布局的元素设置宽度属性width: 49%;（49%是参考值，可根据实际情况调整）和浮动属性float。为了避免各浮动元素紧挨排列，可使用外边距margin属性来调节。代码举例：

HTML代码：

CSS代码：

@media screen and(min-width:640px)and (max-width:959px){

.main.tile{width:49%;float:left;height:200px; mragin-bottom:10px;background:blue;}

.main.right{float:right;}

}

5.网页三列布局实现

三列布局是在大屏幕（横置平板电脑、桌面显示器）设备上显示的效果。其显示尺寸在960像素以上。即添加语句@media screen and(min-width:960px){/*三列布局的CSS代码全都写在此处*/}。三列布局就包含网页所有的内容区域。在单列布局、双列布局中不显示的元素在三列布局中都要显示出来，给对应元素使用display:block;语句。三列布局的实现要点是：给元素的宽度属性width设置合适的百分比，并使用浮动属性float。

代码举例：

HTML代码：

CSS代码：

.main.primary{width:70%;float:left;}

.primary.left{width:58%;float:left;height:300px;}

.primary.right{width:40%;float:right;height: 300px;}

.main.sidebar{width:28.6%;float:right;}

6.网页效果展示

通过编码实现响应式网页的单列布局、双列布局、三列布局，响应式网页的“框架”就搭好了。如图2所示。

图2　响应式网页布局效果

接下来进行最终页面的实现，给网页中添加具体的内容，如网站标题、网站菜单、网站各类新闻、网站各类功能入口等，并对这些添加的内容进行美化。在“移动版”的显示效果中，体现内容突出、页面简洁等风格。在“桌面版”的显示效果中，在保持网页风格一致的前提下，适当添加特效功能、让页面表现更丰富、进一步提高用户体验。如图3所示。

图3　响应式网页最终效果

当网站首页制作完成后，使用同样的制作流程把其他页面（如文章列表页、网站内容页等）也实现出来，然后结合网站后台管理系统，响应式网站就开发出来了。

四、分析与结论

响应式网页设计的一般步骤是：根据网站“原型效果图”，确认其在不同尺寸设备中要实现的各类布局效果，绘制断点图辅助设计，按照“移动优先、渐进增强”的思想，先实现响应式布局、然后添加具体网页内容进而实现整个页面。

响应式网页设计中的技术要点包括：1.设置网页元素的宽度或元素之间的左右距离大小时，要使用百分比，而不使用像素值。例如，width:90%;或marginleft:2%;，这样才能使得网页布局随着显示设备的尺寸来变化。2.在小屏幕布局中，某些网页元素不显示，为其添加display:none;。在大屏幕布局中，要其显示则添加display:block;。3.合理使用媒体查询，布局效果在三至五种为宜。三种布局效果可以兼容小、中、大屏幕。五种布局效果进一步细分可兼容小、中、中大、大、超大屏幕。布局效果少于三种，兼容性不好；超过五种，则设计实现与管理维护难度明显提高，性价比不高。4.有针对性的应用弹性图片、JavaScript特效和CSS3的各类属性如圆角、阴影、背景渐变、过渡、变形、动画等效果给网页增加更丰富的显示效果，体现“渐进增强”设计思想，给用户增加良好体验。

响应式网页设计已成为当今网页开发的主流。网页前端工程师要在熟练掌握相关技术前提下，多编码多测试多维护多总结，才能与时俱进，开发出性能良好且受用户欢迎的网站。

参考文献：

[1]百度百科.响应式网页设计 [EB/OL].(2015-07-15)[2015-12-10].http://baike.baidu.com/view/9876268.htm.

[2]密海英.面向不同设备的响应式网页设计初探[J].苏州市职业大学学报,2013,（2）.

[3][美]Tim Kadlec.响应式Web设计实践[M].侯鸿儒,译.北京:人民邮电出版社,2013.

[4][美]Ben Frain.响应式Web设计：HTML5和CSS3实战[M].王永强,译.北京:人民邮电出版社,2013.

[5][美]Stephen Hay.响应式Web设计全流程解析[M].余果,译.北京:人民邮电出版社,2014.

[6][美]BenjaminLaGrone.响应式Web设计：HTML5和CSS3实践指南[M].黄博文,饶勋荣,译.北京:机械工业出版社,2014.

（责任编辑:魏树峰）

中图分类号：TP399

文献标识码：A

[文章编号]1671－802X(2016)02－0014－04

收稿日期：＊2016－02－23

作者简介：吴多智(1982-)，男，海南海口人，软件工程硕士，讲师，研究方向：电子商务，计算机应用。E-mail:chenyiquan213@sina.com.

基金项目：琼台师范高等专科学校校级基金项目(qtky201501)

Realization and Analysis of Responsive Webpage Design

WU Duo-zhi,CHEN Yi-quan
(Qiongtai Teachers College,Haikou 571127,Hainan)

Abstract:The traditional websites lack sufficient compatibility with intelligent mobile devices.The concepts, design ideas and relevant techniques of responsive webpage design are presented.The process of responsive webpage design is illustrated with actual cases.The procedures and key techniques of responsive webpage design are analyzed and summarized,which offers reference for the development of responsive webpage.

Key words:responsive webpage design;webpage case;webpage design;webpage analysis