响应式网页设计

响应式Web设计（Responsive Web design）

所谓响应式Web设计（简称RWD），就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式。

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

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

响应式网页设计已经是如今当之无愧的标准配置了，我们需要响应式的技术来应对日渐碎片化的屏幕尺寸。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

image.png

image.png

采用了响应式Web设计

http://www.pku.edu.cn/

image.png

没有采用响应式Web设计

image.png

RWD的三项组成科技

1. 弹性网格布局：开始设计网页的时候，网站的宽度都以百分比形式定义。百分比布局使得网页宽度能够随着查看它们的屏幕窗口大小变化，即弹性布局。默认情况下，网页布局是有弹性的。在不包含媒体查询打开它，缩放浏览器窗口，你会看见文本会根据屏幕缩放自动重排。
2. 媒体查询：利用媒体查询，可以根据设备的能力应用特定的CSS样式。比如，可以根据视口宽度，屏幕宽高比和朝向（水平还是垂直）等，只用几行CSS代码1就改变内容的显示方式。在响应设计中，媒体查询中用得最多的特征是视口宽度。
3. 弹性图片/媒体：弹性图片（flexible grids） 在小屏幕上可缩小尺寸，并可扩展大最大尺寸以支持大屏幕。

RWD和前後端的关系

前端工程师负责浏览器端用户交互界面和逻辑等，后端负责数据的处理和存储等。前后端的关系可以浅显地概括为：后端提供数据，前端负责显示数据。前后端是有比较强的数据依赖的关系，后端依赖前端的请求，前端依赖后端的响应。

RWD的提出

https://alistapart.com/article/responsive-web-design
Ethan Marcotte曾经在A List Apart发表过一篇文章"Responsive Web Design"，文中援引了响应式建筑设计的概念:现出现了一门新兴的学科--"响应式架构(responsive architecture)"--提出，物理空间应该可以根据存在于其中的人的情况进行响应。响应式网站设计(Responsive Web design)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备;换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。
。