响应式网页设计

“响应式Web设计”是基于HTML5和CSS3的RWD(ResponsiveWeb Design)，网页内容会随着视口(viewport)及设备(device)的不同而呈现不同的样式(style)，利用弹性网格布局(fluid grid)、弹性图片／媒体(flxible images)、媒体查询(media queries)等技术实现。——课件

响应式网站设计(简称RWD)是一种新的网站设计模式，以此构建的网站可自动适应不同的访问设备(从桌面电脑、平板电脑到智能手机)，方便用户阅读和导航浏览，减少用户的放大/缩小/滑动操作，从而提供完整而友好的用户体验。——360百科

为何需要响应式网页设计？

以前的网站固定宽度通常为960px，而比这个更宽的电脑设备飞速发展，全球手机浏览器的使用量开始超过PC浏览器。传统的Web页面已经不能满足多种设备的浏览效果，而响应式Web让Web作品适配手机、平板和桌面电脑，适应用户的屏幕大小，为今天和明天的设备都提供最佳用户体验，且仅使用HTML5和CSS3，而不用后端支持。——课件

2016年全球台式电脑、手机、平板的市场份额

2017.2—2018.2全球移动设备的市场份额

根据上图我们不难看出手机的使用率与10月中旬赶超台式电脑，且远高于平板的，而且各种移动设备的使用率各不相同，为了避免频繁设计不同的网页以使用于不同的设备，让用户拥有更好的浏览体验，我们需要Web网页设计。

使用了响应式网站设计：淘宝网

不使用响应式网站设计：天猫网

RWD的三项组成科技

弹性网格布局

常用于设计比较复杂的页面，可以轻松地实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减小了依赖于浮动布局实现元素的定义以及重置元素的大小

弹性图片/媒体

在没有CSS的情况下，网页中的图片往往会呈现原来视口的像素，致使网页失衡，无法看清图片。而弹性图片则会根据屏幕的大小自动缩放图片，使用户可以很清晰地看清图片。

媒体查询

媒体查询是向不同设备提供不同样式的一种不错方式，它为每种类型的用户提供了最佳的体验。作为CSS3规范的一部分，媒体查询扩展了media属性（控制您的样式应用方式）的角色。例如，多年来人们常常使用一种独立的样式表，通过指定media="print"来打印网页。媒体查询将这一理念提升到了更高层次，允许设计人员基于各种不同的设备属性（比如屏幕宽度、方向等）来确定目标样式。

RWD和前后端的关系

RWD：页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整

Web前端：Web页面的结构、Web的外观视觉表现以及Web层面的交互实现

Web后端：Web后端更多的是与数据进行交互以及处理相应的业务逻辑

由上述可见，RWD是Web前后端共同实现的。

RWD的提出者的个人链接：Marcotte(2010)