浅析响应式网页设计的发展

朱晓

摘要：在当前数字革命时代，有不同屏幕的设备很多大小。 这为网页开发增加了一层额外的复杂性。 网站现在必须在不同设备上呈现类似的体验。 解决这个问题，它需要一个设计解决方案。这个解决方案被称为响应式设计。

关键词： 响应式网站；媒体查询；弹性布局；切换式推出型导航

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2018）04-0229-02

Analysis of the Developments of the Responsive Web Design

ZHU Xiao

（Shanghai Business and Information College，Shanghai 201700， China）

Abstract： In the current age of digital revolution， there are many devices with different screensizes. This increases an additional layer of complexity for web development. A webapplication now has to present a similar experience across different devices. To solvethis problem， it needs a design solution.This solution is termed as responsive design.

Key words： responsive website； media query； elastic layout； Switch type push type navigation

2010年，Ethan Marcotte首次发表了关于响应式网站设计的文章。如其他新技术一样，响应式网站设计一开始并不被人接受，许多人不断辩称——甚至于现在某些人还在这么做——我们需要为手机单独创建网站。但随着今天市场上设备的激增，很明显，我们不能依赖于一种手机模型并将其作为设计标杆。我们的设计要能够适应所有设备，而这些设备的屏幕尺寸各不相同。

而与此同时，响应式设计也在不断发展。它不再仅仅是适应屏幕尺寸，也能适应不同的设备性能，如触摸屏、视网膜显示屏，以及慢速连接。我们有令人惊叹的硬件设备，而响应式设计能帮助我们充分利用各类设备。响应式网站设计一开始只是设计简单的、注重内容的站点（不依赖CSS或JavaScripi），使其能显示在几乎所有的联网设备上。在此基础之上，这种设计通过渐进式增强——响应式网站设计正是基于此——针对具体的显示屏尺寸以及设备功能进行优化。因而，功能手机（也即功能有限的旧式手机）只能获得那些它们能使用的内容，而相对来说较新的智能设备所访问的网站则具有丰富的设计、完美适配其屏幕的界面，设备功能被充分利用。响应式网站设计使我们有能力为所有用户呈现最好的网站，而不管他们具体使用什么设备。

1 弹性布局

网页设计中的弹性布局是使用相对度量单位指定页面的宽度。页面内容调整大小以适应浏览器窗口显示的大小或页面上使用的字体。无论您的浏览器窗口多大，都应调整大小以填充浏览器窗口。例如，如果您的浏览器窗口打開为1024像素的宽度，则右列应该向右延伸至窗口的右侧。展开浏览器窗口，使其现在变成1200像素宽，您将再次看到浏览器调整主要内容以填充额外空间。在限制范围内，如果缩小窗口宽度，内容也应该缩小，以便您不必水平滚动以阅读文章。这样的页面布局被称为“弹性”布局，其拉伸或缩小以根据其大小填充浏览器窗口。这种布局的其他名称包括“液体”或“流体”布局，因为页面扩展自身以便像液体扩散一样填充浏览器窗口的宽度，以便在灌注到容器中时填充整个表面。

弹性布局是通过使用em或百分比这样的相对单位来完成的。 em基本上是在页面上使用的字体的高度。它被认为是相对的，因为16点字体与12点字体有不同的高度。百分比具有你习惯数学的正常含义。也就是说，如果页面的宽度设置为80%，则意味着它可以具有的最大宽度的80%。它被认为是相对的，因为最大宽度取决于浏览器窗口的大小。

2 媒体查询

网页设计重拾流式布局的理念，使用基于百分比的宽度，并设法让其成为一种适用于小型移动设备的解决方案。使用百分比而不是像素使得网页及页面各部分都能够自动改变宽度来适应任意屏幕尺寸，因此也就很容易地消除了相似尺寸设备之间的差异。但是一旦你纵观所有的设备，就会有这样一个问题。如果要缩窄三栏的布局以应用于智能手机的屏幕宽度，那么各栏中的文本会变得窄而长，难以阅读。同样，单栏布局在智能手机屏幕上看起来是蛮好的，但要想在桌面显示器上轻松阅读则显得太宽了。

本质上，这个问题是：不创建多个单独的站点，如何使一个网站能够在窄屏上以单栏显示，而在大屏上以多栏显示？如何根据浏览网站的设备的特性来要浏览器变换网页的布局？这就需要媒体查询。CSS的@media规则允许你根据设备特性而显示不同的CSS样式，这实际上在十多年前的CSS2中就有了，但当时它只支持查询媒体的类型，这通常只能用于为网站设计创建一个打印版。直到CSS3对媒体查询制定了规范，才能够基于媒体（设备）的宽度、高度和色彩性能等特性执行更精确的查询。媒体查询不影响HTML，只影响使用CSS后应用到页面的样式。浏览器在2009年前后开始支持CSS3媒体查询。媒体查询可以做什么呢？举个基本的例子，假设我们有一个网站，有两块各自独立的内容。我们可以创建一个很适合智能手机的单栏设计，以垂直堆叠的方式显示两块内容。而在更宽的屏幕上，我们可能想要以并排的两栏来显示这两块内容。

使用媒体查询，我们可以询问设备屏幕有多宽，然后告诉浏览器仅在屏幕具有足够宽度时，才以两栏来显示内容。要用代码来实现这种效果，我们在开始只是用CSS将内容显示在一栏中，然后再添加一条CSS媒体查询，询问屏幕宽度是否大干等于40 em。之后我们会在这条媒体查询中添加CSS样式将内容显示在两栏中。浏览器仅在该媒体查询结果为真时（即如果屏幕宽度大干等于40em）才使用此CSS样式。如果屏幕宽度小于40em，它会忽略此CSS样式，内容保持在一栏中。因此，我们可以针对不同的屏幕尺寸使网站变换为不同的布局，而无需创建单独的网站。

通过使用媒体查询，我们可以随心所欲地改变网站的样式，不仅仅是栏数。媒体查询可以移动内容，改变文字的大小，隐藏或显示内容块，调整边距和空白，以及调整其他的CSS样式。

3 响应式框架

随着响应式网页的兴起，各种响应式框架遍接连涌出，它们的出现提高的网页设计师的工作效率，能更好的使得网页设计师专注于网站个性化的开发工作。

笔者在此以目前最为流行的Bootstrap为例，简单介绍框架的使用的原理。

Bootstrap前身是Twitter Bootstrap，它是一个完全基于响应式的框架，通过其提供的文件可以快速的部署一个响应式网站。首先，引入bootstrap.css和bootstrap-responsive.css两个css文件，然后引入jquery-latest.min.js和bootstrap.css两个js文件。

在网页中，需要先添加一个css类为container的div标签，它是用于控制其子元素响应式宽度的可以重复使用的布局元素。然后在contain中添加一个类为hero-unit的div。Bootstrap使用row类来控制div的宽度，在这行中，可以把网页分成12列。bootstrap的响应式菜单是放在顶部的button类，它是个响应式元素，只会显示在宽度较窄的手机版网页中，当该元素被单击的时候，会显示其移动版的菜单栏目nav-collapse，当然这还需要使用一些javascript技术来实现按钮的操作。框架提供的布局会自适应各类设备，每行中的内容都会占据特定的列宽，在移动设备中为缩小为单列，便于移动用户浏览。Bootstrap还有其他功能，包括动画特性等，由于篇幅有限，不再展开介绍。

4 响应式设计的实际应用

响应式并不是完美的，但是经过时间检验和网页设计师们的完成，已经趋向成熟和完善。国外IT巨头率先尝试响应式网页设计，如：Apple，IBM，HP ，Google， You Tube， microsoft都先后采用響应式网页技术对自己的网站进行了改版。而在国内，如华为、三星中国、微软中国等业界巨头也采用了响应式网站设计。然而，像京东、淘宝等大型网站并没有采用响应式网站设计。其原因是响应式设计并不适合所有网站。

使用响应式设计最有说服力的理由是，你创建的网站不仅在现今市场上的各种设备上都能正确地工作并有良好的显示效果，而且很可能在将来出现的那些新设备上也能如此。此外，使用响应式设计，你不会冒用户可能在桌面显示器上浏览移动版站点的风险，同时，一个网站更易于管理：从开发人员的角度来看，为不同的设备管理单个代码库更容易。用户会有更好的体验，使用响应式设计，可以展现更好的内容，包含使用适当的图像。

反之亦然。如果你有多个独立的站点，那这无疑会成为一个问题，无论你是通过设备检测来发送正确版本的站点给每个设备，还是使用一组单独的URL（比如一个m-dot子域名）供移动版网站使用。如果网站有一个单独的移动版本，通常会使用设备检测（其发生在网站服务器，且在页面显示之前）来确定应该将哪个版本的网页：移动版或桌面版发送给任一特定的设备。这样，站点中的每个页面虽然只有一个URL，但实际上存在两个不同版本的HTML页面。

同样，响应式网页也有自身的缺陷，为了兼容各种浏览器，响应式设计会有很多的冗余代码，也就是所谓hack。另外将一个功能丰富、结构繁杂的电商平台改成响应式网页也是不合理的。不仅如此，将大量内容显示在手机上也是影响手机访问速度。所以，复杂的页面不太适合响应式网页设计方案。随着WINDOWS XP逐渐退出历史舞台，IE9+浏览器和以webkit为核心的浏览器（如chrome，360极速，猎豹，搜狗，qq，百度浏览器等）已经占据浏览器绝大部分市场份额。越来越多的网站选择成为响应式。

5 结束语

响应式网页设计从诞生开始，一路走来，经过了诸多国内外设计师的努力，已经逐渐完善。另外，随之w3c对浏览器标准的一次次更新，微软ie浏览器也愈发向着标准看齐，使得响应式网页设计在国内也开始变得活跃起来。本文介绍了响应式网页设计的关键技术，并阐述了响应式布局的优缺点和国内外的发展情况。

参考文献：

[1] Ethan Marcotte.移动优先与响应式Web 设计[M].司徒卓恒，译.人民邮电出版社，2014.

[2] 吉伦沃特.灵活Web 设计[M].李静，等，译.机械工业出版社，2009.

[3] Ben Frain.响应式Web 设计———HTML5 和CSS3 实战[M]. 王永强，译. 人民邮电出版社，2013.

[4] 张贺，陈锦昌.基于响应式的移动门户网站构建[J].现代计算机，2015（4）：68- 71.

[5] 谢辉，等.基于响应式Web 的农业网站设计方法研究[J].安徽农业科学，2016（2）：330-334.

[6] 吴多智，陈益全.响应式网页设计案例实现与分析[J].安徽电子信息职业技术学院学报，2016（2） .

[7] 张坤.响应式设计分析及其与web 应用程序的对比研究[J].攀枝花学院学报， 2016（2）：29-31.

[8] 胡佳锋.新媒体Web 技术的研究与实现[D].北京： 中国地质大学，2016.