响应式网站设计

名词解释

1.响应式web设计(Responsive Web Design)：

响应式网站设计是一种网络页面设计布局，其理念是：网络内容中集中创建页面的图片排版大小，可以智能地根据访问它的视口（vieewpoet）以及使用的设备环境(device enviorment)进行相对应的布局。

2.HTML

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

3.CSS（层叠样式表）

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

4.DOM(文档折叠)

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

5.前端

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

6.后端

后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。
基于HTML5和CSS3就可以制作不需要后端方案的RWD

---

为何需要响应式web设计？

不同设备有不同的屏幕分辨率

StatCounter-resolution-ww-monthly-201702-201802.png

图片数据来自(互联网与新媒体)市场调查机构 statcounter.
如今电子产品更新周期短，各类产品设备屡见不鲜。如图片所示，市场上各种屏幕分辨率都在被使用，其中不具名的其他类分辨率占比最重，因此，为了使各类用户都有更好的上网体验，响应式Web设计很有被执行的需要，来满足各类用户使用不同的视口和设备达到更好的体验。

2.web设计更好的适配于电脑、手机、平板

StatCounter-comparison-ww-monthly-201601-201612.png

· 2016年

StatCounter-comparison-ww-monthly-201702-201802.png

2017年
2016年底，手机的使用在全球市场份额超越电脑桌面,全球手机浏览器超越pc浏览器，响应式web设计让web作品适配手机、平板和桌面电脑，适应用户的屏幕大小，为今天和明天的设备都提供最佳用户体验。

---

响应式网站与传统网站的对比

1.传统网站：中山大学南方学院文学与传媒系
http://wcx.nfu.edu.cn/
电脑桌面版

wcx.1.png

手机版

wcx.2.jpg

对比

2.响应式网站：中山大学文学与传媒学院

http://wcy.nfu.edu.cn

屏幕较窄时显示网站导航

wcy.1.png

当把屏幕宽拉至768左右Responsive web显示出首页

响应式网站设计的关键技术

1.弹性网格布局(fluid grid)

在pc端实现的页面基础上，将一些元素的宽高由原来的固定多少像素(px)、调整为百分比(%)、字体比例(em)或布局方面的margin、padding、left、top等以px为单位的值，这也是当前实现响应式布局的两种主要实现方法。

2.流体图片(liquid image)

对图片处理，如果要使图片能根据分辨率来适应，而且还不失真，其实不用考虑的那么复杂，我们要做的只是让图片能根据不同分辨率自适应罢了，不管图片会不会因为被拉伸而失真，因为真的遇到这样的情况，我们可以考虑在不同分辨率下使用不同的图片，这样就简单多了。所以让图片尺寸自适应，我们只要不给图片设定具体的宽高尺寸，只要在样式中给该图片一个width：100%，这样图片就能根据它父容器的尺寸自动调整了。

3.媒体查询(media query)

这个也是响应式页面的一个关键技术，根据不同的分辨率去调整一些不同的样式。
@media screen and (max-device-width: 480px) {
.column {
float:none;
}
}

通过上面的这样媒体查询结构，我们可以设定在不同分辨率下选用不同的样式来调整响应式页面。像前面第二点流体布局上，我们使用百分比或字号比例去实现流体布局的时候，第一种方法是可以不用媒体查询
直接实现流体布局的，就是元素的宽高能自适应不同分辨率屏幕。

---

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

文献资料来自《Responsive Web Design with HTML5 and CSS3》