响应式网页设计

名词解释

• 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 样式规则，最常用的是浏览器的宽度

“Fluid Layout”的重要

它和前后端的关系

后端与前端

• 需要依赖后端方案的RWD通常是网页版、手机版等等分开服务、设计和产出页面；
• 不需要依赖后端方案的RWD通常是网页版、手机版等等一起服务、设计和产出页面。

参考文献

• 百度
• Frain, B. (2017). 响应式Web设计：HTML5和CSS3实战（第2版）. (奇舞团译) 人民邮电出版社
• 维基百科