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

响应式网页开发的实现方案有很多，包括 CSS 媒体查询的使用、弹性网格和布局、流式图像等。无论用户使用的是哪种设备，响应式页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以实现自动的适应。现在的大部分网站采用的都是响应式网页，这在很大程度上丰富了网页的元素，加强了用户和网站的互动，提高了用户的体验感，我们的动力节点在线网站就是采用了响应式的网页设计模式。

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

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

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

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

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

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

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

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