响应式网页设计(什么是响应式网站？)

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

响应式网站指的是同一个网站，可以支持在iPai、手机、电脑以及其他各种设备上能够正常访问网站，它可以根据设备屏幕大小进行等比缩，不会影响到最终的展示效果。

响应式网站的优势：

兼容性更好：

响应式网站最大的特点就是能根据不同的设备自动调整分辨率的大小，解决了用户在使用其他设备时使用效果不好的问题，这样的情况对网站来说绝对是百利无一害的，这相当于拓宽了用户浏览网站的渠道，提高用户体验感，从而增加网站的转化率。

访问速度更快：

“天下武功，唯快不破”，网站的访问速度是非常重要的。特别是在这个信息爆炸的时代，没有人愿意为你的网站等待。

HTML5+CSS3实现的响应式网站比使用传统技术做出来的网站打开速度更快，响应式网站都是静态页面，数据除了必要的产品图，BANNER图，都是文字的数据大小，几乎都是秒开。

有利于SEO优化：

响应式网站是由HTML5制作的静态页面，更有利于搜索引擎的蜘蛛抓取，这就意味着收录速度会更快，网站权重也比较容易提升，权重上来就会源源不断的带来自然流量，节约推广成本。

总之，响应式网站帮你实现了一站多用的想法，无论从时间、成本、效果还是其他方面考虑，它都是未来企业网站的首选。

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

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

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

响应式网页的特点：

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

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

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

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

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

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

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

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