一.名词解释

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

2.超文本标记语言（HyperText Markup Language（HTML）：是一种详细规定了浏览器和万维网服务器之间互相通信的规则

3.层叠样式表（Cascading Style Sheets（CSS）：是一种用来表现HTML的一个应用或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

4.域名解析系统 Domain Name System（DNS）：是因特网的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使人更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。

5.Web前端：在Web应用中用户可以看得见的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。

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

二.为何需要响应式设计？

现如今，电子产品层出不穷，据上图，市场上各类屏幕分辨率都有用户使用。所以为了不同的用户都可以更好的使用，响应式网页设计很有必要出现以及发展。

屏幕分辨率统计全世界

桌面和移动和平板电脑的中国市场份额

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

根据市场调查机构stat counter网站，以中国与全球的桌面、移动和平板电脑市场份额为例

如上图所示，不论是中国还是全球，移动手机的使用都大于桌面。响应式网络设计的出现可以给用户更好的体验。

那么响应式网页与非响应式网页有什么区别呢，请看以下的例子

1.非响应式网页（凤凰网）

如图，在电脑上地显示是如此，在iPhone6plus上地显示也依旧如此。对于用户地使用不是很方便。

非响应式

非响应式

2.响应式网页（中山大学南方学院文学与传媒学院官网）

如下图，是否相比与非响应式网页更为方便呢?

wcy

wcy

响应式网页设计的相关技术

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前端即在Web应用中用户可以看得见的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。而后端是与数据库进行交互以及处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。因此，web的正常运转需要前端与后端的相互交互来实现。

文献来自：响应式web设计 HTML5和CSS3实战（第2版）与网络

响应式网页设计