响应式网页设计

响应式web设计(Responsive Web Design)

简单来说，就是网页内容会随着访问他的视口及设备的不同而呈现不同的样式。
响应式web设计基于CSS3和HTML,利用弹性网络布局，弹性图片/媒体，媒体查询等技术实现。

Web 标准

Web 标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。包括我们所熟悉的HTML,XHTML,CSS，JabaScript等待。

HTML和XHTML

中文译为超文本标记语言，主要是通过HTML标记对网页中的文本，图片，声音等内容进行描述。
XHTML是更严谨纯净的HTML版本，目的是为了实现HTML向XML过渡。

CSS

通常称为CSS样式表，主要用于设置HTML页面的文本内容（字体，大小，对齐方式等），图片的外形（宽高，边框样式，边距等）以及版面的布局等外观显示样式。

JavaScript

JavaScript是Web页面中的一种脚本语言，通过JavaScript可以将静态页面转变成支持用户交互并响应相应事件的动态页面。在网站建设中，JavaScript用于为页面添加动态效果。

为什么需要响应式web设计

全球桌面与移动与平板电脑的市场份额

全球市场屏幕分辨率

中国市场的屏幕分辨率

---

因此综合以上数据，在智能终端领域，浏览网页以不仅仅局限于电脑桌面。屏幕的分辨率也不仅仅局限于1920×1080，于是需要响应式设计进行调节。

举例

http://www.sysu.edu.cn/2012/cn/index.htm
采用了响应式设计

中山大学官网

iPhone界面

794×670的任意界面

http://www.xhsysu.edu.cn/
未采用响应式设计

中山大学新华学院官网

1186×860的任意界面

RWD的三项组成科技

• HTML ：对网页元素进行整理和分类，相当于一个屋子的结构
• CSS ：设置网页元素的版式，颜色，大小等外观样式，相当于一个屋子的外形
• JavaScript：网页模型的定义及交互的编写，相当于房间内部设备，让房子具有功能性。

RWD与前后端的关系

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

引用Ethan Marcotte

https://alistapart.com/article/responsive-web-design

“响应式设计”这个名字是Ethan Marcotte 在2010年发明的。当时，他在A LIst Apart上写了一篇文章（http:// www.alistapart.com/articles/responsive-web-design),这篇文章综合运用了三种已有技术（弹性网格布局，弹性图片/媒体，媒体查询）实现了一个解决方案，就叫“响应式web设计”。如今看来，随着智能终端设备的应用，浏览网页已经不再仅仅局限于PC机了。移动手机、PAD等智能终端越来越受欢迎。于是为了达到一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本，响应式web设计应运而生。