响应式网页设计

响应式Web设计(Responsive Web design) ,简单来说，就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式。而RWD即 自适应网页设计(Adaptive Web Design)，指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。

---

---

由(互联网与新媒体)市场调查机构 statcounter 的数据图表可知，全球移动和平板电脑的市场份额占了相当一部分，而且更新率也是非常快，因此，为了避免为不断到来的新设备做专门的版本设计和开发而投入大量的人力和物力，我们就需要研发像响应式Web设计(Responsive Web design)这样的对不同大小屏幕进行相应的响应和调整的技术。

相关数据查询链接如下：http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet

 响应式网站设计有三个关键组成部分:1. media query; 2. 流动网格;3. 灵活缩放的图片。

下面列举一个采用了响应式web设计的网站：http://www.etao.com/ 

基于RWD而设计的网站利用CSS3 media queries规则来自动适应不同访问设备的屏幕尺寸和显示要求。而流动网格采用页面元素大小的相对单位(百分比或EM)，而非传统设计使用的绝对单位(像素或点数)，以确定页面各组成元素的大小。最后，图片大小也是采用相对单位而灵活缩放，不至于在小屏幕的移动设备上超出显示区域。

以及一个非响应式web设计的网站进行对比：http://www.sj33.cn/digital/wyll/201504/43741.html    

可以发现非响应式web设计的网站无法根据屏幕的大小来自动适应调整，从而无法带给使用者一个好的阅读视角

另外RWD能实现前后端数据的更好交互，从而使浏览界面更好地适配