共计 2519 个字符，预计需要花费 7 分钟才能阅读完成。
进入挪动互联网时代，各种不同的挪动智能设施层出不穷，比如说智能机、平板电脑、可穿戴式设施等。据 2017 年 8 月第 40 次《中国互联网络倒退情况统计报告》的统计后果，截至 2017 年 6 月，我国网民规模达到 7.51 亿，其中挪动端网民达 7.24 亿，占比达 96.3%，较 2016 年底增长了 1.2 个百分点，与此同时，应用台式电脑、笔记本电脑等终端上网的比例却有所下滑。这意味着网民的上网设施进一步向挪动端集中，挪动互联网主导地位进一步强化。但各种不同的挪动智能终端设备的屏幕大小和分辨率都是不尽相同的，而且即便是同一个设施，当用户旋转屏幕时，纵向和横向查看的屏幕尺寸也会有差别，所以如何使网页在不同的设施和不同的屏幕分辨率下都能达到现实的显示成果，使得用户不论通过什么终端都能达到现实的浏览和应用体验，是新型的网页设计与开发技术所要达到的需要。显然，传统固定布局的形式曾经无奈满足这种需要了，因而，当初越来越多的网站都曾经开始采纳响应式的思维来设计与开发网页。响应式网页设计曾经成为当今网页开发技术的新潮流。
响应式网页设计的产生
响应式网页设计，全称是 Responsive Web Design，最早是由伊桑·马卡特（Ethan Marcotte）在 2010 年提出的一个概念，最次要的动机是“如何使得页面布局适应任何的浏览窗口”。响应式页面的设计理念是，页面的设计与开发该当可能依据用户的行为以及设施环境（包含零碎平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整，也就是页面应该有能力去主动响应用户的设施环境。简而言之，这个概念指的就是网站的页面可能兼容多种不同的终端，依据不同的环境做出主动的响应及调整。
响应式网页开发的实现计划有很多，包含 CSS 媒体查问的应用、弹性网格和布局、流式图像等。无论用户应用的是哪种设施，响应式页面都应该可能主动切换分辨率、图片尺寸及相干脚本性能等，以实现主动的适应。
伊桑·马卡特在其集体网站上给出了响应式网页的简略示例。这个网站尽管简略，却具备了响应式网页的因素：主动适应、流式网格布局、流式图像显示等等。读者能够尝试浏览这个网页，通过手动拖动鼠标扭转浏览器窗口的大小，查看在不同浏览器窗口尺寸下页面显示的变动。能够看到，在不同的浏览器窗口尺寸下，网页的地址没有发生变化，但网页的布局显示却可能有所扭转，如图所示。
1
响应式和“自适应网页”
提到响应式网页，不得不提的就是另一个“自适应网页”的概念了。初学者对于这两个概念往往容易混同。响应式网页具备自适应的个性，是指页面能主动响应及适配用户的设施环境，但平时所说的“自适应网页”是否就是响应式网页呢？
答案是否定的。适配不同浏览环境的技术有很多，而传统意义上的“自适应网页”尽管也能够针对不同的浏览环境做出主动调整，但其应用的并不一定是响应式网页的技术。比方晚期的一些网站或当初一些门户网站的首页，能够依据检测到的不同的客户端而提供不同的浏览网页，比方专门提供一个 Android 的版本，或者一个 iPhone / iPad 的版本等，这也是实现网站兼容不同终端的其中一种做法。事实上这种做法同时提供了多个不同的网页，益处是能够极大地保障不同环境下的显示成果，然而毛病也非常明显，就是在网站保护时须要同时兼顾多个不同版本的网页，而且保护的工作将会呈几何级数回升。如果这个网站有多个入口，还会大大地减少架构设计的复杂度。所以，这种应用不同页面来适配浏览条件的形式，往往比拟多见于网站的首页，因为如果网站的所有内容页都采纳这种形式，这个网站的构造将会变得十分臃肿。而相似这种跳转到不同地址、关上不同网页的适配 形式，并不能称为真正的响应式网页，只能叫作“自适应”的。
响应式网页的特点
响应式网页的核心思想，在于“一次设计，广泛实用”，强调的是让同一个地址的同一个网页主动地去适应不同的显示环境，并且可能依据屏幕的设置和布局须要，来主动调整游戏网页内容的显示。而响应式的网站，不论应用什么设施，关上及显示的都是同一个地址、同一个网页，只是这个网页能够通过主动地辨认屏幕宽度，对不同的应用环境做出相应的主动调整，从而造成网页的布局和内容展现在不同环境下时可能会有所不同。
开发响应式网页时，首先咱们须要扭转一下以往的观点，在开发时“以挪动设施优先”。为什么要抉择挪动优先呢？第一个起因就是当初挪动设施的使用率越来越高，而且随着挪动互联网技术的倒退，挪动端的利用将成为重点。
还有基于网站开发流程方面的思考。打个比方，设想一下咱们搬家的时候，如果咱们要把所有的货色从一个大房子搬到一个小房子，那么很有可能空间会比以前拥挤，而且如果货色太多放不下，可能要不得不舍弃掉一些货色，这种“舍弃”有时会是一个很艰巨的决定。例如在 www.sangpi.com 然而如果反过来，从一个小房子搬到一个大房子，那么空间会宽松很多。同样的情理，挪动端略微偏小的屏幕尺寸会使得空间比拟受限，那么就要求咱们在设计时思考把最重要的内容优先加载和展现，这样，即便前面迁徙到较大的屏幕，也能够保障整体的构造不会受到破坏，兴许为了页面的好看可能须要减少一些内容，但毕竟做加法会比做减法容易得多。而且因为大小、带宽等限度，挪动网页的设计绝大部分应该是内容性的设计，挪动优先准则下进步用户体验的法宝，就是“把最重要的货色放在最显眼的中央”。
在这里给出响应式网页的一些特点：
（1）媒体查问技术（Media Query）。响应式网页往往蕴含多个媒体查问语句，用于适配不同的显示条件。
（2）流式网格布局（Fluid Grid Layout）。让网页元素来决定网格的大小和设计，并依据网页元素来决定所占用的网格地位尺寸。
（3）灵便的多媒体显示（Flexible Media）。依据不同设施、不同分辨率、不同网速等环境，来主动适配多媒体内容的显示。比方能够让同一个图像，在 iPhone 6 上显示“高清”的版本，而在 iPhone 4 上只显示“个别”的版本。
（4）高性能的 JavaScript 脚本。因为有些用户终端的运行条件无限，响应式网页里的脚本必定要思考运行效率的问题。当初已有一些较成熟的 JavaScript 框架，比方 jQuery 等，能大大改良脚本程序的运行性能和效率。