响应式网页设计

什么是响应式Web设计

• 响应式Web设计

英文：Responsive Web Design（RWD）

就是网页的内容会随着访问它的视口，及设备的不同而呈现不同的样式。
这个名字是Ethan Marcotte在2010年发明的，当时他在A List Apart上写了一篇文章
A List Apart
文章中综合运用了三种已有技术（弹性网格布局，弹性图片/媒体，媒体查询）实现了一个解决方案，就叫“响应式web设计”。

由来

因移动设备的大量增长以及大屏幕显示器的流行，上网的设备屏幕之间的差距也达到了前所未有之大。

截止2018年2月，调查机构（gs.statcounter.com）的数据显示，各种各样的显示屏在浏览网页，一个内容要在5种以上的不同尺寸的显示屏上显示。
gs.statcounter.com

Feb 2017-Feb 2018

面对不断扩展的浏览器和设备诞生了基于HTML5和CSS3的响应式web设计，用于网页设计的视觉呈现。
前端作用于采集输入信息，后端进行处理。计算机程序的界面样式，视觉呈现属于前端。

• RWD 使用与否对比

1. 使用 RWD

淘宝

2. 未使用 RWD

广东就业专项补助
这年头可能也就政府网站没匹配RWD了

• HTML5

  HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。目标是取代1999年所制定的HTML4.01和XHTML1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到匹配当代的网络需求。广义论及HTML5时，实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

• CSS3

  层叠样式表（英语：Cascading Style Sheets，简写CSS），又称串样式列表、级联样式表、串接样式表、层叠样式表、阶层式样式表，一种用来为结构化文档（如HTML文档或XML添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。目前最新版本是CSS2.1，为W3C的推荐标准。CSS3现在已被大部分现代浏览器支持，而下一版的CSS4仍在开发中。

• JavaScript

  JavaScript，一种高级编程语言，通过解释执行，是一门动态类型，面向对象（基于原型）的解释型语言。它已经由ECMA（欧洲电脑制造商协会）通过实现语言的标准化。它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、IE、Firefox、Safari、Opera）支持。JavaScript是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。

引用

https://zh.wikipedia.org/wiki/HTML5
https://zh.wikipedia.org/wiki/%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8#CSS3
https://zh.wikipedia.org/wiki/JavaScript
http://gs.statcounter.com/screen-resolution-stats
《响应式web设计》[英] Ben Frain 著 奇舞团 译