响应式网页设计概述

1. 定义

响应式网页设计（RWD，Responsive Web Design）这个术语，由伊桑-马科特（Ethan Marcotte）提出。他在A List Apart发表了一篇开创性的文章，将三种已有的开发技巧（弹性网格布局、弹性图片、媒体和媒体查询）整合起来，并命名为响应式网页设计。这个术语还有一堆表示相同意思的其他叫法，如流式设计、弹性布局、塑料布局、流体设计、自适应布局、跨设备设计以及弹性设计。

一言以蔽之，响应式网页设计是针对不同的设备，对同样的网页内容进行完美布局的显示机制。这里要注意的一点是，电脑端和非电脑端设备上所呈现的内容或功能是不一样的。

这种情况不应该使用响应式网页设计，而是需要老老实实的针对不同的设备进行前端开发。

2. 媒体查询语法

1. css 文件直接使用中：

@media screen and (max-width: 360px) {// 具体样式规则写在这
}

2. css 文件中加载其它样式文件：

@import url('phone.css') screen and (max-width: 360px);

3. link 标签里：

<link rel="stylesheet" type="text/css" href="phone.css" media="screen and (max-width: 360px)" />

媒体查询能支持的特性列表可查看[ MDN 上的特性列表]。(https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries)

3. meta 标签

使用 meta 标签可以阻止移动端浏览器自动调整页面大小。

<meta name="viewport" content="initial-scale = 1.0, width = device-width" />

4. 媒体查询是实现响应设计的关键，但不是全部

仅使用媒体查询来实现响应式页面设计的话，实现的效果更像是“自适应式页面设计”。那些仅使用媒体查询来适应不同视口的固定宽度设计，只会从一组CSS媒体查询规则突变到另一组，两者之间没有任何平滑渐变。

它的表现为：当视口处于媒体查询定义的断点时，页面能够按照指定的样式设置来显示，这种情况比固定布局好得多了，但还不是真正的响应式设计 – 视口在到达指定断点（断点是有限且明确的）前，页面布局都处于静止的状态，不能平滑灵活地过渡。

因此，在媒体查询的基础上，还需要使用流式布局还替换掉固定布局，实现视口断点设置的布局样式之间的平滑过渡，也能对未来的设备视口变化有一定的应对能力。

5. 流式布局（百分比布局）

使用百分比布局创建流动的弹性界面，同时使用媒体查询来限制元素的变动范围。

1. 修改元素固定像素宽度为百分比宽度

在丹·锡德霍姆（Dan Cederholm）编写的《无懈可击的Web设计》 一书中，伊桑·马科特为其撰写了一章关于流动布局的内容。在书中，他提供了一个简易可行的公式，将固定像素宽度转换对应的百分比宽度：

目标元素宽度÷上下文元素宽度=百分比宽度

2. 修改字体的固定像素大小为相对单位大小（em）

上面这个公式依旧适用，不过把主体由元素变为了字体大小

目标字体大小÷上下文字体大小=百分比字体大小

浏览器默认的字体大小是 16px，所以，以下样式规则的效果都是一样的。

body {font-size: 16px;font-size: 100%;font-size: 1em;
}

注意：使用 em 作为字体单位时，字体大小是相对于父元素的字体大小的；而 line-height 行高是相对于元素自身的字体大小的。

3. 修改图片为弹性图片（能随着视口缩放而变换尺寸）

下面这样就可以使图片自动缩放到与其容器100%匹配。

img {max-width: 100%;  // 图片自动缩放为父容器的宽度
}

更进一步，可以将同样的样式应用到其他多媒体标签上。

img,object,video,embed {max-width: 100%;
}

给弹性图片设置阈值：需要图片既是响应式，又限定最大宽度，可以像下面这样做：

img {width: 45%;  // 假设父容器的宽度为 100px, 响应式百分比为 45/100 = 45%max-width: 45px; // 设置该图片缩放能达到的最大尺寸为 45px
}

TIPS

1. 重置样式

重置样式就是一组CSS声明，用来覆盖不同浏览器渲染HTML元素时的各种默认样式。重置样式一般会被加入到主样式文件的开头，用来将各个浏览器的自有默认样式重置成统一表现，确保样式表中后续追加的样式在不同浏览器中有相同的显示效果。针对HTML5文档的通用的样式文件 normalize.css 。