名词解释
Ethan Marcotte在2010年发明了响应式网页设计（RWD,Responsive Web Design）这个名字。他在A List Apart上写的文章Responsive Web Design中将三种已有技术(弹性网络布局、弹性图片/媒体、媒体查询)综合运用,就叫"响应式Web设计"。
根据维基百科的定义，响应式网站设计(简称RWD)是一种新的网站设计模式，以此构建的网站可自动适应不同的访问设备(从桌面电脑、平板电脑到智能手机)，方便用户阅读和导航浏览，减少用户的放大/缩小/滑动操作，从而提供完整而友好的用户体验。
Responsive web design (often abbreviated to RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
为何需要它
-
一个没有采用响应式Web设计的网站分别在电脑，手机上的显示：
电脑端
手机端 -
一个有采用响应式Web设计的网站分别在电脑，手机上的显示：
电脑端
手机端 -
过去我们的网站都是固定宽度的。这种固定宽度（通常为960像素左右）对笔记本电脑来说也不算宽，拥有更大显示度的用户则会在两侧看到很大的白边。然而随着移动设备的增长，人们上网方式的改变，上网设备屏幕之间的差距也达到了前所未有的改变。
从statcounter上电脑桌面、手机和平板在世界市场的对比图上可看出在2016年10月中旬电脑桌面被手机超越。
Desktop vs Mobile vs Tablet Market Share Worldwide
我们还可以在这个网站statcounter看到各设备屏幕分辨率的不同。
Screen Resolution Stats Worldwide
从以上可以得出一个结论：我们需要响应式Web设计来让一个网站同时适配多种设备和多个屏幕，让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。
它的三项组成科技
- 弹性网格布局 fluid grids
概念要求页面元素使用相对单位如百分比或字体排印学调整大小，而不是绝对的单位如像素或点
- 弹性图片/媒体 flexible images
也以相对单位调整大小（最大到 100%），以防止它们显示在包含它们的元素外面
- 媒体查询 media queries
允许网页根据访问站点设备的特点而使用不同 CSS 样式规则，最常用的是浏览器的宽度
它和前后端的关系
- 需要依赖后端方案的RWD通常是网页版、手机版等等分开服务、设计和产出页面；
- 不需要依赖后端方案的RWD通常是网页版、手机版等等一起服务、设计和产出页面。
参考文献
- 百度
- Frain, B. (2017). 响应式Web设计：HTML5和CSS3实战（第2版）. (奇舞团译) 人民邮电出版社
- 维基百科
