响应式网页设计

名词解释

1、响应式网页设计（Responsive Web Design，通常缩写为RWD）：就是网页的内容会随着访问它的视口和打开的设备不同而呈现出不同的样式。

响应式网页设计：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

2、HTML5:超文本标记语言（Hyper Text Markup Language）

超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

3、CSS3:层叠样式表（Cascading StyleSheet）

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

4、前端（Frontend）：当人们浏览一个网站时第一眼所看到的页面信息，整体布局等。

前端泛指Web前端，也就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。

5、后端（Backend）：人们第一眼看不见的，网页背后是由计算机语言控制的

后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。

为何需要“响应式网页设计”

s.jpeg

• 如图可知，全世界越来越多的人使用平板电脑和智能手机，人们浏览互联网的平台也越来越多，响应式web设计也变得越来越重要。现今大多数人出于各种原因都在使用多种设备尤其是平板电脑和智能手机浏览互联网，而响应式web设计来构建的网站能自动适应不同的访问设备，使人们浏览更加方便。
• 由于，越来越多的智能移动设备加入到互联网中来，互联网的访问设备是爆炸性的增长，当然屏幕的分辨率也是爆炸性的增长。所以为了给手机和平板设备提供更好的体验，必须在网站设计中使用响应式网站设计，并且整合从pc端到手机的各种屏幕尺寸和分辨率，用技术来使网页适应不同分辨率的屏幕。

没有采用响应式web设计的网站

中山大学南方学院官网：http://www.nfu.edu.cn/

u.jpeg

1520858523366.jpg

采用了响应式web设计的网站

11.jpeg

13.jpeg

总结：从这两个网站的对比下，我们可以很清楚的了解到响应式web设计的优势，采用了它的网站更方便人们浏览，不需要用户自己调节大小和移动页面来寻找自己需要的东西。没有采用响应式web设计的网站使用起来什么不便，拉动滚轴十分麻烦，页面效果给人感觉比较差劲。

RWD的三项组成科技

分别是弹性布局、弹性图片／媒体、媒体查询。

• 弹性布局：可以让设计适应较多场景，也包括某些尺寸的屏幕。百分比布局使得网页宽度能够随着查看它们的屏幕窗口大小变化。
• 弹性图片：弹性图片指的是不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。
• 媒体查询：可以让我们针对特定的设备能力或条件为网页应用特定的CSS样式。媒体查询包含媒体类型和零个或多个检测媒体特性的表达式。width、height和colour都是可用于媒体查询的特性。使用媒体查询，可以不必修改内容本身，而让网页适配不同的设备。

RWD与前后端的关系：

*需要依赖后端方案的RWD：网页版、手机版等等分开服务、设计、产出页面
*不需要依赖后端方案的RWD：网页版、手机版等等一起服务、设计、产出页面
*基于HTML5和CSS3就可以制作出不需要后端方案的RWD

关于响应式web设计的提出：

Ethan Marcotte曾经在A List Apart发表过一篇文章"Responsive Web Design"，文中援引了响应式建筑设计的概念：现出现了一门新兴的学科——"响应式架构(responsive architecture)"——提出，物理空间应该可以根据存在于其中的人的情况进行响应。为什么一定要为每个用户群各自打造一套设计和开发方案？和响应式建筑相似，Web设计同样应该做到根据不同设备环境自动响应及调整。
显然，我们无法也无需使用运动传感器或是机器人技术，响应式Web设计更多需要的是抽象思维。好在，一些相关的概念已经得到了实践，比如液态布局、帮助页面重新格式化的media queries和脚本等。但是响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式。