第1章 响应式网页设计基础

1.1 什么是响应式网页

进入移动互联网时代，各种不同的移动智能设备层出不穷，比如说智能手机、平板电脑、可穿戴式设备等。据2017年8月第40次《中国互联网络发展状况统计报告》的统计结果，截至2017年6月，我国网民规模达到7.51亿，其中手机网民达7.24亿，占比达96.3%，较2016年底增长了1.2个百分点，与此同时，使用台式电脑、笔记本电脑等终端上网的比例却有所下滑。这意味着网民的上网设备进一步向移动端集中，移动互联网主导地位进一步强化。但各种不同的移动智能终端设备的屏幕大小和分辨率都是不尽相同的，而且即使是同一个设备，当用户旋转屏幕时，纵向和横向查看的屏幕尺寸也会有差异，所以如何使网页在不同的设备和不同的屏幕分辨率下都能达到理想的显示效果，使得用户不管通过什么终端都能达到理想的浏览和使用体验，是新型的网页设计与开发技术所要达到的需求。显然，传统固定布局的方式已经无法满足这种需求了，因此，现在越来越多的网站都已经开始采用响应式的思想来设计与开发网页。响应式网页设计已经成为当今网页开发技术的新潮流。

1.1.1 响应式网页设计的产生

响应式网页设计，全称是Responsive Web Design，最早是由伊桑·马卡特（Ethan Marcotte）在2010年提出的一个概念，最主要的动机是“如何使得页面布局适应任何的浏览窗口”。响应式页面的设计理念是，页面的设计与开发应当能够根据用户的行为以及设备环境（包括系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整，也就是页面应该有能力去自动响应用户的设备环境。简而言之，这个概念指的就是网站的页面能够兼容多种不同的终端，根据不同的环境做出自动的响应及调整。

响应式网页开发的实现方案有很多，包括CSS媒体查询的使用、弹性网格和布局、流式图像等。无论用户使用的是哪种设备，响应式页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以实现自动的适应。

伊桑·马卡特在其个人网站上给出了响应式网页的简单示例。这个网站虽然简单，却具备了响应式网页的要素：自动适应、流式网格布局、流式图像显示等等。读者可以尝试浏览这个网页，通过手动拖动鼠标改变浏览器窗口的大小，查看在不同浏览器窗口尺寸下页面显示的变化。可以看到，在不同的浏览器窗口尺寸下，网页的地址没有发生变化，但网页的布局显示却可能有所改变，如图1-1所示。

1.1.2 响应式和“自适应网页”

提到响应式网页，不得不提的就是另一个“自适应网页”的概念了。初学者对于这两个概念往往容易混淆。响应式网页具有自适应的特性，是指页面能自动响应及适配用户的设备环境，但平常所说的“自适应网页”是否就是响应式网页呢？

答案是否定的。适配不同浏览环境的技术有很多，而传统意义上的“自适应网页”虽然也可以针对不同的浏览环境做出自动调整，但其使用的并不一定是响应式网页的技术。比如早期的一些网站或现在一些门户网站的首页，可以根据检测到的不同的客户端而提供不同的浏览网页，比如专门提供一个Android的版本，或者一个iPhone / iPad的版本等，这也是实现网站兼容不同终端的其中一种做法。我们往往可以看到一些“自适应”网站的首页，用PC端浏览时访问的是类似“www.xxx.com”的地址，而使用移动设备访问的是类似“m.xxx.com”的地址，可见打开的并非同一个网页。事实上这种做法同时提供了多个不同的网页，好处是可以极大地保证不同环境下的显示效果，但是缺点也非常明显，就是在网站维护时需要同时兼顾多个不同版本的网页，而且维护的工作将会呈几何级数上升。假如这个网站有多个入口，还会大大地增加架构设计的复杂度。所以，这种使用不同页面来适配浏览条件的方式，往往比较多见于网站的首页，因为如果网站的所有内容页都采用这种方式，这个网站的结构将会变得非常臃肿。而类似这种跳转到不同地址、打开不同网页的适配方式，并不能称为真正的响应式网页，只能叫作“自适应”的。

1.1.3 响应式网页的特点

响应式网页的核心思想，在于“一次设计，普遍适用”，强调的是让同一个地址的同一个网页自动地去适应不同的显示环境，并且能够根据屏幕的设置和布局需要，来自动调整网页内容的显示。而响应式的网站，不管使用什么设备，打开及显示的都是同一个地址、同一个网页，只是这个网页可以通过自动地识别屏幕宽度，对不同的使用环境做出相应的自动调整，从而造成网页的布局和内容展示在不同环境下时可能会有所不同。

开发响应式网页时，首先我们需要改变一下以往的观念，在开发时“以移动设备优先”。为什么要选择移动优先呢？第一个原因就是现在移动设备的使用率越来越高，而且随着移动互联网技术的发展，移动端的应用将成为重点。

还有基于网站开发流程方面的考虑。打个比方，想象一下我们搬家的时候，如果我们要把所有的东西从一个大房子搬到一个小房子，那么很有可能空间会比以前拥挤，而且如果东西太多放不下，可能要不得不舍弃掉一些东西，这种“舍弃”有时会是一个很艰难的决定。但是如果反过来，从一个小房子搬到一个大房子，那么空间会宽松很多。同样的道理，移动端稍微偏小的屏幕尺寸会使得空间比较受限，那么就要求我们在设计时考虑把最重要的内容优先加载和展示，这样，即使后面迁移到较大的屏幕，也可以保证整体的结构不会受到破坏，也许为了页面的美观可能需要增加一些内容，但毕竟做加法会比做减法容易得多。而且由于大小、带宽等限制，移动网页的设计绝大部分应该是内容性的设计，移动优先原则下提高用户体验的一大法宝，就是“把最重要的东西放在最显眼的地方”。

在这里先给出响应式网页的一些特点。在后面的学习中，我们将深入学习这些特点在网页中的实现。

（1）媒体查询技术（Media Query）。响应式网页往往包含多个媒体查询语句，用于适配不同的显示条件。

（2）流式网格布局（Fluid Grid Layout）。让网页元素来决定网格的大小和设计，并根据网页元素来决定所占用的网格位置尺寸。

（3）灵活的多媒体显示（Flexible Media）。根据不同设备、不同分辨率、不同网速等环境，来自动适配多媒体内容的显示。比如可以让同一个图像，在iPhone 6上显示“高清”的版本，而在iPhone 4上只显示“一般”的版本。

（4）高性能的JavaScript脚本。由于有些用户终端的运行条件有限，响应式网页里的脚本肯定要考虑运行效率的问题。现在已有一些较成熟的JavaScript框架，比如jQuery等，能大大改进脚本程序的运行性能和效率。