交互细节丨什么是响应式网页设计，这种设计有何优缺点

1. 什么是响应式网页设计？

1.1 响应式网页设计的概念

响应式网页（Responsive Web Design，通常缩写RWD）的概念是Ethan Marcotte在2010的时候，在他A List Part的文章中提出来的：网页设计应该要根据不同设备环境灵活转换和调整，能够适应不同显示设备的分辨率大小，如台式电脑、笔试本电脑、平板、手机等等，同时减少缩放、平移和滚动。

作者：龙哥     图片来源：https://isux.tencent.com/responsive-web-design.html?variant=zh-hans        出自文章： isux.tencent.com/responsive-web-design.html

e.g.

图片来源：http://alistapart.com/d/responsive-web-design/ex/ex-site-larger.html

1.2 响应式网页设计与自适应网页设计的区别？

自适应网页设计与响应式网页设计的概念区别好像众说纷纭，但目前个人觉得好像对业界来说，过分纠结这两者的意义也不大，大略了解下便可，最重要的是找到最适合自己网站的设计、采用最适合的技术。

这两个概念的提出都是基于越来越多的终端设备的出现背景，都旨在使用技术来使网页能够从小到大来适应不同分辨率的屏幕。有说法是：响应式网页设计是自适应网页设计保护的一个子集。

作者 Viljami Salminen   文章链接: viljamis.com/2012/adaptive-vs-responsive-design/

响应式网页设计的概念是Ethan Marcote在他的文章中提出的：响应式网页设计是采用CSS的media query技术，配合流体布局（fluid grids）和可以自适应的图片视频等资源素材。这是通过HTML和CSS就可实现的。而且，响应式设计是采用流体+断点（break point）的，在遇到断点改变页面样式之前，页面是会随着窗口大小自动缩放的（fluid grids）。响应式设计是倾向于在不改变内容的前提下，改变呈现的外观布局。

自适应设计是Aaron Gustafson提出的，他提出自适应设计是在使用响应式的CSS media query技术之外，还要通过Javascript来操作HTML来让网页更加适应移动设备。且自适应设计是在针对特定几种分辨率进行优化（e.g. 1280px, 800px, 640px），在断点之间的过渡较少。自适应设计还可能会根据移动端情况来减少部分功能和内容。

2. 响应式网页设计的优缺点是什么？

1.1 优点

①跨平台：响应式网页设计本身最大的特点；

②节省开发成本：不用根据不同设备来进行开发维护；

③在不同平台上的表现内容保持一致性，体验良好；

1.2 缺点

①局限性大，自由度低：因为在设计时要考虑不同设备的呈现效果，必然会导致在设计表现方式等方面会有更多的局限性；

②会影响加载速度，也会导致不必要的流量浪费：为了适配不同的设备，响应式页面需要大量为不同设备打造的CSS样式代码，这样便会影响页面的加载速度。而且页面中图片视频资源一般是统一加载，因而在低分辨率的设备上，会加载了大于它显示要求的图片视频，这也会影响加载速度且导致流量浪费。当用户在网络状态不良好的情况下打开网页时，可能会造成很不好的体验；

③部分浏览器的支持问题：对于非webkit内核的浏览器支持极差，不过目前来说这个问题应该不大了。

3. 小结

响应式网页设计是给不同设备的用户都提供一样的内容，但根据不同设备的状况来分别设计，能够更加充分地发挥出不同设备的优势来。

虽然响应式网页设计有着它很明显的优势，但使用与否，还是需要慎重考虑是否符合自己网页的页面类型。像对于内容型资讯型的网站，它们的页面结构较为简单，确实适合响应式页面，能够在保证各个设备都能被良好设计和呈现的局限条件下，减少对不同设备的开发成本。但对于大型门户网站、电商网站来说，它们的页面内容非常多，响应式网页设计恐怕就不适合它们了。像天猫、淘宝，如果要在适配网页端和移动端的局限条件下设计网页，就要舍弃掉很多的设计可能性了，响应式网页设计带来的成本减少可能也会极大地减少了它收益。这还不如为网页、移动端分别来设计，以得到一个最适合网页端的设计和最适合的移动端的设计，以最大化自身的收益。