响应式网页设计Responsive Web design

响应式网站设计是一种网络页面设计布局，页面的设计与开发根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。-----摘自百度百科

RWD有三个关键组成部分

1.媒体查询 media queries
CSS媒体查询允许我们基于浏览网站的设备的特性来应用不同的样式申明，最常用的特性是视口宽度。
2.弹性图片 flxible images
通过CSS代码让图片在不同的屏幕上自动缩放
3.弹性网格布局 fluid grid
百分比布局使得网页宽度能够随着查看他们的屏幕窗口大小变化

视口 viewport

移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。不同设备上的浏览器的默认viewport的宽度也不一样。

样式 style

所有主流浏览器都支持 <style> 标签。定义和用法 <style> 标签用于为 HTML 文档定义样式信息。

设备 device

网页显示的屏幕

超文本标记语言 HTML

超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准。它通过标记符号来标记要显示的网页中的各个部分。

CSS 层叠样式表

层叠样式表(Cascading Style Sheets)是一种用来表现HTML或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

为何需要“响应式网页设计”

随着移动设备的市场发展，屏幕尺寸大小不一，网页显示在设备上很难统一，影响用户体验。根据市场调查机构stacounter的数据表明，全球用户使用的屏幕尺寸不一，都占有较大的比例，所以网页显示在不同的设备上显示很难达到一致。

858360484.jpg

响应式网页设计是一种统一的解决方案，可以让Web作品适配手机、平板、和桌面电脑。响应式的网站可以适应用户的屏幕大小，为今天和明天的设备都提供最佳的用户体验。

苹果 中国

采用了响应式网页设计

新浪微博

没有采用响应式网页设计

RWD和前后端的关系

Web前端:顾名思义是来做Web的前端的。我们这里所说的前端泛指Web前端，也就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。
Web后端：后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。

RWD一词提出人Marcotte的网页链接

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。Ethan Marcotte个人网页