响应式网页设计

2018-03-10 本文已影响0人 911d3480101a

名词解释

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设计来让一个网站同时适配多种设备和多个屏幕，让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。