响应式网页设计

响应式web设计（RWD）

• 是在开发和设计网站过程中产生的一种方式，它的目的是让内容布局能随用户使用显示器的不同而变化。再明确点说，这种设计概念，就是让原本1292像素宽，4栏的内容，能够很好地显示在1025像素宽的用户屏幕上，同时还能自动简化成2栏。这种特殊的设计形式就被称为“响应式web设计”。

HTML5

• 万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。

CSS3（层叠样式表3级）

• CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

JavaScript

• JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。

SVG（可缩放矢量图形）

• 可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维图形的一种图形格式。它由万维网联盟制定，是一个开放标准。

statcounter 的数据所制的图和表

屏幕快照 2018-03-12 下午7.54.46.png

采用了响应式Web设计

• http://www.tsinghua.edu.cn/publish/newthu/index.html

无采用响应式web设计

• http://www.4399.com/

RWD的三项组成科技

1. media query：允许网页根据访问站点设备的特点而使用不同 CSS 样式规则，最常用的是浏览器的宽度。

2. 流动网格：一个被显式声明为网格的容器中，其所有子元素自动被认定为网格单元格，而这些网格单元格在没有被显式设置明确位置时，浏览器将会自动为这些网格单元格的位置进行计算，按照先后顺序从左向右，或从上到下排列。在这里把这种方式称之为网格的流动。

3. 灵活缩放的图片：相对单位调整大小，以防止它们显示在包含它们的元素外面。

RWD和前後端的关系

RWD 是前后端的统一，后端来输出不同的内容，前段来按需加载资源。

教科书及RWD一词提出人Marcotte(2010)的网页连结

“响应式web设计”这个名字是Ethan Marcotte在2010年发明的。当时，他在A List Apart上写了一篇文章（http://www.alistapart.com/articles/responsive-web-design/），这篇文章综合运用了三种已有技术（弹性网格布局、弹性图片／媒体、媒体查询）实现了一个解决方案，就叫做“响应式web设计”。