动态式响应模式

概述

通过前面的文章我们已经学过如何用响应式思维思考，也就是考虑用户在任何设备上的体验，从最小的屏幕开始，逐步往更大的屏幕推进。当然还要考虑按钮需要足够大。

但是响应式设计不只是优化单个元素，接下来我们需要重新审视页面布局的设计，即你想展示哪些信息给你的用户，怎么将这些信息在页面上排列，找出合适的设计模式更像是一门艺术，而非科学。尝试一些不同的设计模式，最终用它们来设计一个布局很棒的响应式网页。

添加基本媒体查询

响应式网页会基于设备的特征而变化，也就是在不同的设备上应用不同的样式，有几种方法可以有选择性的应用 CSS 代码，最简单的是使用媒体查询（medias queries），它提供了一个简单的逻辑方法来根据不同的设备特征应用不同的样式，比如设备的宽度、高度或者设备像素比，从背景图片到页面布局，甚至其它的任何东西。

添加媒体查询样式表

举例，使只有当设备的宽度大于 500px 时才生效：

<link rel="stylesheet" media="screen and (min-width:500px)" href="over500.css">

添加一个新的 CSS 文件链接 href 以及媒体查询属性 media，将属性值设置为最小宽度 500px 时应用。在样式表中设置我们需要的样式即可。

body {
  background-color: blue;   
}

这样设置后，当我们改变浏览器的网页大小，一旦浏览器窗口宽度超过 500px 的零界点，网页就变成了蓝色。

除了利用样式表链接的媒体查询属性，还有两种方式可以应用媒体查询。

@media screen and (min-width: 500px) {
    body { background-color: green;}
}

我们可以在 @media 标签嵌入

@import url("no.css") only screen and (min-width: 500px);

或者在 @import 标签嵌入，因为性能原因，我们要绝对避免使用 @import，因为它是一个代价和优先级都非常高的标签。

我们需要权衡 CSS 链接 和 @media 的代价，如果用 CSS 链接，会有很多小文件，很多 HTTP 请求，但是如果用 @media，HTTP 请求会少一些，但是文件都会变大。

@media screen and (min-width: 500px) {
    body