名词解释

响应式Web设计（Responsive Web Design）

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

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

RWD

RWD指的是"Responsive Web Design "的英文首字母，即为响应式Web设计；
它包含三项组成科技：弹性网格布局（fluid grid）、弹性图片/媒体（flexible images）、媒体查询（media queries）

弹性布局

很久以前，混沌初开之际（大约公元20世纪90年代末），网站的宽度大都以百分比形式定义。百分比布局使得网页宽度能够随着查看它们的屏幕窗口大小变化，因而得名弹性布局。

响应式图片

根据显示器分辨率，提供多个图片源，在页面上图片的尺寸，或者其它参数的一种方法。

媒体查询（Media Queries）

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

视口（viewport）

浏览器中用于呈现网页的区域
视口是与设备相关的一个矩形区域，坐标单位是与设备相关的“像素”，大多数情况下，视口与客户区相同

前端（FRONT END）

前端对于网站来说，通常是指，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。

后端 (BACK END)

后端开发应是指后台程序设计,包括数据库设计、动态代码编写,一般需要掌握下面几种语言和数据库:ACCESS,SQL,HTML,ASP,PHP,JSP,.Net,VBscript 或Javascript.

前后端关系

前后端的划分，可以简单地理解为凡是运行在用户设备上的技术都可以称为前端技术（比如 HTML / CSS / JS，甚至移动设备的 Obj-C / Swift ）；而后端的作用就是负责将这些东西封装在 HTTP 的数据包中然后通过网络传送到前端。当然除了这些前端文件，后端还有一个更重要的职能，即保存和提供用户数据，比如移动端常见的 JSON 就是目前最流行的在后端和前端之间传输的一个文件格式。

HTML（Hyper Text Markup Language）

HTML即超文本标记语言；主要是通过HTML标记对页面中的文本、图片和声音等内容进行描述。

HTML5

它是集HTML、JavaScript、层叠样式表和一组API与一身的技术集合，是HTML的最新版本。（上一版本是HTML4.01）

XHTML（Extensible Hyper Text Markup Language）

XHTML 指扩展超文本标签语言（EXtensible HyperText Markup Language）；
XHTML 的目标是实现HTML向XML的过渡；
XHTML 与 HTML 4.01 几乎是相同的；
XHTML 是更严格更纯净的 HTML 版本；
XHTML 是作为一种 XML 应用被重新定义的 HTML。

CSS（Cascading Style Sheets）

CSS通常称为CSS样式或样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高边框样式、边距等）以及版面的布局等外观显示样式。
层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

功能：

CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

样式：

字体属性————————font：属性值；
颜色属性————————color：属性值；
背景属性————————background：属性值；
浮动属性————————float：属性值；

JavaScript

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

网页

网页就是网站中用于承载信息的页面，主要由文字、图片和超链接等元素构成，除了这些元素，网页中还可以包含音频、视频以及flash等。

Web标准

Web标准不是某一标准，而是由W3C和其他标准化组织制定的一系列标准的集合。包含我们熟悉的HTML、XHTML、CSS、JavaScript等等。

优点：

提高页面浏览速度；
使网页更易于维护；
降低网站流量费用；
更容易被搜索引擎搜索；
内容能被广泛的设备访问；
让Web的发展前景更广阔。

构成：

结构标准：如果将Web标准看作一栋房子，结构标准就相当于房子的框架；
表现标准：表现标准就相当于房子的装修，让房子看起来更美观；
行为标准：行为标准相当于房间内部设备，让房子具有功能性。

为何需要响应式网页设计

333.png

444.png

根据以上图表显示：

在2016年3月中旬，Desktop和Mobile在中国的市场占有率发生了明显变化，Mobile的市场占有率开始超过Desktop的市场占有率；
2016年3月中旬至今，移动端的市场占有率一直高于其他两种类型，这表明近年来中国的移动端市场比平板和电脑要好，即表示人们对移动端的需求正在上升，用户的设备环境发生了变化。

响应式网页设计的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。

①由于用户的设备环境正发生变化，如果没有响应式网页设计，当你在使用移动端打开某些没有响应式设计的网页时，你会感到不方便，那么用户体验就会比较差；页面应该需要有能力去响应用户的设备环境，实现了一个网站兼容多个终端，使用户的体验得到满足。

②再者，我们就可以不必为不断到来的新设备做专门的版本设计和开发了，基于HTML5和CSS3的RWD不需要依赖后端方案。

举例子

厦门宝海海洋文化发展有限公司官网（采用了响应式Web设计）
腾讯视频（没有采用响应式Web设计）

RWD和前后端的关系

响应式不只是前端的责任（media query），也不是后端的责任（单独的m.站点），而是二者统一，后端来输出不同的内容，前端来按需加载图片，来做断点。
前端：与传统的web开发相比，响应式设计的页面由于页面布局、内容尺寸发生了变化，所以最终的产出更有可能与设计稿出入较大，需要前端开发人员和设计师多沟通。

响应式网页设计