陈飞旭

随着移动网络的普及，用户使用移动设备上网已经成为了一种趋势。为使得网站能够兼容更多类型的设备，保证用户有一个良好的体验，在网站设计时必须使用响应式Web技术。

【关键词】响应式Web 媒体查询 弹性图片 viewport

近些年来移动智能设备发展迅猛，用户可以在个人电脑、平板电脑、智能手机等各种终端上访问一个网站。传统的Web设计技术已经适应时代的发展，无法保证在从屏幕像素大小不同的设备上访问网站时都能够得到一个良好的显示。

我们在开发大学生竞赛服务网站时也遇到了类似的问题，经过认真的研究，最终利用响应式Web设计技术解决了这一问题。本文将通过探讨响应式的Web设计方式，研究如何构建一个网站，使之能够自动适应不同的网站访问设备，通过动态调整网页的布局结构和显示样式，把相同的内容以不同的格式呈现出来，做到“一源多屏”。

1 响应式Web

2010年Ethan Marcotte提出了一种响应式网页设计理念[1]，它使得网页可以根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。简单的说，响应式Web页面，能够根据不同终端设备，响应用户的操作自动调整网页尺寸，达到页面美观的效果。响应式Web在设计时需要使用HTML5和CSS3，涉及到媒体查询（Media Queries）、响应式布局、弹性图片和viewport 属性四大关键技术。

1.1 媒体查询

媒体查询是响应式Web设计的关键[2]。媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式。媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width、 height 和 color 等属性。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。在实际的开发中，网页设计者可以为不同大小的屏幕分别编写CSS样式文件，并在用户访问网站时通过@media screen判断和调用对应的样式文件。

例如：

@media screen and （min-width：1200px）{.post_box{width： 45%；float： left；} }

@media screen and （min-width：960px）{.post_box{width： 30%；float： left；} }

规定了网页中的post_box在屏幕分辨率在大于1200px时的宽度为45%，当屏幕大小大于960px且小于1200px时的宽度为30%。

1.2 响应式布局

响应式布局是进行响应式设计的基础。响应式Web 设计采用响应式布局来满足不同设备的需求，页面元素随着浏览器窗口的调整可以自动适配。响应式布局可以通过百分比布局、字号比例和浮动属性等技术手段完成。

为避免用户在较小设备浏览网站时通过横向滚动条来查看页面，对于网页对象的宽度应该使用“%”为单位的相对尺寸，而不是使用固定像素（px）。上面的例子中，post_box的宽度被设计成百分比尺寸。当显示屏幕发生改变时，post_box宽度也会发生响应的变化。

在响应式Web中不能使用像素（px）来设置文字的大小，而必须使用字号比例（em）。em可以根据当前基准字号的宽高成比例缩放文字，实现文字大小的响应式变化。

为防止在小屏幕上Web页面各个div元素的寬度由于挤压变得细长，需要将网页中div的位置设置为浮动（float）的。这样可以解决当屏幕宽度不够，一行放不下多个区块的问题。

1.3 弹性图片

响应式Web设计的思路中，一个重要的因素是怎样处理图片方面的问题。网页中的图片通常会按照实际尺寸进行显示，但是在一些小屏幕的设备上，屏幕的实际宽度可能会小于图片宽度。为了避免使用鼠标拖动才能浏览的问题，需要使用弹性图片技术。弹性图片指的是不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。弹性图片技术最早由Richard Rutter提出，即使用CSS的max-width属性，例如：

img { max-width： 100%；}

上述代码确保图片最大的宽度不会超过浏览器窗口或是其容器可视部分的宽度，所以当窗口或容器的可视部分开始变窄时，图片的最大宽度值也会相应的减小，图片本身永远不会被容器边缘隐藏和覆盖。

1.4 viewport属性

利用媒体查询能够很好的解决网页在分辨率大小不同的个人电脑浏览器上的浏览问题，但对于手机或平板浏览器等移动终端还是不够的。因为移动终端的浏览器默认页面是为宽屏幕设计的，它会把页面自动缩小以适应屏幕，造成的结果就是页面中的内容太小而影响用户的阅读。这个时候就必须使用viewport的meta标签来做一系列的设置，从而获取终端设备正确的宽度。

Viewport的使用比较简单，只需要在网页的head部分添加如下代码即可：

2 基于响应式的大学生竞赛服务网站的设计步骤

大学生竞赛服务网站是我们获批的一项辽宁省大学生创新创业训练计划项目。项目研究的主要内容是：为适应当前大学生创新创业活动的蓬勃发展所开发的一款能够适用于各类竞赛服务的通用支持网站。网站的功能包括完成各类赛事通知的发布；参加竞赛的学生可以完成报名、提交作品、展示作品的PPT介绍以及视频演示等；专家可以对作品进行评比等。

2.1 网站布局

经过分析，浏览网站的用户可能会用PC机、平板电脑和各类手机等设备访问网站，这些设备的屏幕像素大小不同。因此，我们决定将系统设计成能够基于响应式的网站。

为实现开发过程的高效简化，在前端开发中可以使用Foundation、Bootstrap或Pure等CSS框架。我们在设计大学生竞赛服务网站时采用了Twitter提供的Bootstrap来进行网页的布局。Bootstrap是一款移动设备优先的CSS框架，它将所有终端设备分成了：超小屏幕（手机，小于768px）、小屏幕（平板，大于等于768px）、中等屏幕（桌面显示器，大于等于992px）和大屏幕（大桌面显示器，大于等于1200px）四类，并通过媒体查询自动确定当前访问网站的终端设备的类型。Bootstrap利用流式栅格系统将整个屏幕最多分成12列，每个列的宽度能够根据屏幕或viewport尺寸的变化而变化。这些特性正是我们在设计大学生竞赛服务网站时所需要的。

2.2 响应式图片

大学生竞赛服务网站必须提供作品图片展示功能。Bootstrap提供的.img-responsive 类可以让图片支持响应式布局，适应各类终端设备。.img-responsive 类的实质是设置了width、height 和display，从而在父元素中有较好的缩放。

一致的界面能够提高网站的品质。Bootstrap内嵌的FontAwesome项目提供了一套高质量的图标字体。在网站设计的过程中，我们利用该项目美化网页的同时也大大减少了由于采用图片作为背景所带来的网络流量。

3 结束语

响应式网站的出现代表了移动终端 Web开发的发展趋势，它通过整合媒体查询、流动布局和弹性视觉媒体技术来进行页面设计，实现了“一源多屏”，为多元化的终端用户提供更加舒适的 Web 界面和良好的用户体验，大大减轻了网站前端设计人员的负担。响应式网站设计必将取代传统的网站设计方式，成为主流的前端设计方案。

参考文献

[1]傅翠玉.响应式Web设计探究[J].信息与电脑，2016（09）：79-80.

[2]王朋，董爱华，鲍萍萍.响应式Web的研究与应用[J].微型机与应用，2016（10）：15-17，21.

作者单位

辽寧石油化工大学 计算机与通信工程学院 辽宁省抚顺市 113001