响应式网页设计

名词解析：

响应式Web设计【Responsive Web Design(RWD)】：

随着科技的发展，使用移动设备和大屏幕设备的人数越来越多，而且移动设备的尺寸都是不一样的，以前页面的固定宽度已经不能满足人们的需求了，所以我们需要不同宽度或尺寸的页面，来满足不同用户的需求，所以就要用到响应式Web设计。

视口（viewport）:

在 Windows的作图函数中，涉及逻辑坐标到设备坐标的转换。这里提到的窗口（window）、视口(viewport)是对应的概念。视口是与设备相关的一个矩形区域，坐标单位是与设备相关的“像素”，大多数情况下，视口与客户区相同。窗口的坐标是逻辑坐标，与设备无关，可能是像素、毫米或者英寸。窗口坐标的原点与视口坐标的原点始终对应于同一点。对于同一个图形，用窗口坐标系统表达的该区域的长和宽与视口的坐标系统表达的长和宽是不同的。二者就定义了这两个坐标系统的比例关系。程序作图时，使用的坐标总是是窗口坐标。而实际的显示或输出设备却各有自己的坐标。

设备(deview)：

可供人们在生产中长期使用，并在反复使用中基本保持原有实物形态和功能的生产资料和物质资料的总称。

样式（style）:

在代码中是对各个标签的修饰。

后端（backend）：

在后台工作的，控制着前端的内容，主要负责程序设计架构思想，管理数据库等。

前端（frontend）:

所谓的应用产品的前端就是用户看到，接触到和体验到的，他们主要做静态用户界面加上一些动态效果，不涉及数据逻辑，前端考虑到的是用户体验。

超文本标记语言 （HTML）：

“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

层叠样式表 （CSS）：

一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

JavaScript：

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

为什么我们要使用响应式Web设计呢？

statcounter 的数据

接下来，让我们来看一下有采用了响应式Web设计和没有采用了响应式Web设计的网页的区别：

采用了响应式Web设计的网页

http://www.sise.com.cn/

没有采用响应式Web设计的网页

https://www.baidu.com/s?wd=123&rsv_spt=1&rsv_iqid=0xb049964900062f42&issp=1&f=8&rsv_bp=0&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_sug3=4&rsv_sug2=0&inputT=754&rsv_sug4=1357

RWD的三项组成科技：

弹性网格布局 ：

 使用 em 或 rem 单位进行相对布局，相对 % 百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。

、以及。；

弹性图片/媒体：

可以用CSS给图片指定固定宽度，只要一行CSS代码就可以让图片随容器宽度自动缩放。

媒体查询：

CSS规范分为很多模块，媒体查询只是其中一种模块。利用媒体查询，可以根据设备的能力应用特定的CSS样式。比如，可以根据视口宽度、屏幕高度比和朝向（水平还是垂直）等，只用几行CSS代码就改变内容的显示方式。

RWD和前後端的关系：

与前端的关系：

在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。web前端需要掌握的有脚本技术javascript DIV+CSS现下最流行的页面搭建技术，ajax和jquery以及简单的后端程序等。

与后端的关系：

后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。后端的话可供开发的语言有 asp、php、jsp、NET。

RWD一词提出人Marcotte(2010)：

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