响应式设计之媒介查询

你必须像水那样无形：当你把水倒进杯子中，水就变成了杯子的形状；当你把水倒进瓶子中，水就变成了瓶子的形状；当你把水倒进茶壶中，水就变成了茶壶的形状。 — 李小龙
之前读《响应式Web设计实践》，这大概是我印象最深的一句话了。李小龙的功夫了得，可他的功夫哲学更是令人叹服。如今的前端，面临着更多的挑战，尺寸大小不一的设备涌现出来，就像形状各异的容器，而我们的网页必须像水一般， 能够接受各式各样的考验。
为了能够让同一个页面在不同尺寸的设备浏览器中呈现出与之适配的样式，CSS3引入了Media queries，也就是媒介查询，通过一些条件询问语句声明和样式的定义，使浏览器能够应用那些与当前设备匹配的样式。
我们先来介绍一下媒介查询的一般结构：

@media [not | only] mediaType [and] (condition) {
    /* styles */
    a {
        /* styles applied on tag <a> */
    }
}

媒介查询以@media开头，然后可以使用not|only|and这些逻辑关键字把媒介类型和条件表达式串联起来，去询问浏览器，此次声明的表达式是否满足当前运行环境，如果满足，则上面的styles部分的样式就会起作用，进而改变页面元素的样式。下面我们就来介绍和分析一下这个结构：

媒介类型

媒介是用来表示Web的呈现方式，我们的页面有可能被会打印出来，也有可能在投影仪中投射出来，或者在电视等平台中运行，所以也存在很多的媒介类型。以下是常用的媒介类型：

all: 所有设备（默认值）
handheld: 手持设备
print: 打印或打印预览
projection: 投影仪
screen: 彩色计算机屏幕
tv: 电视机

虽然上面列举的比较多，但实际上我们几乎只是用到了all，screen和print，因为现在很多显示设备，如手持设备，都已支持screen类型了。
在开发中，如果我们只是想为普通页面显示设置样式，则可以使用screen，如果想在打印时为页面重新设置一套样式，则可以使用print，如果定义的样式在所有模式下都希望生效，则可以使用all，就像下面这样：

@media screen {
    /* styles */
}
@media print {
    /* styles */
}
@media all {
    /* styles */
}

条件表达式

上面的媒介类型只能识别显示设备的类型，我们还需要针对特定的运行设备监测一些环境参数，比如长宽或分辨率等，下面列举了一些常用的参数：

width: 设备显示区域宽度
height: 设备显示区域高度
orientation: 设备的方向，portrait和landscape分别表示竖直和水平
resolution: 设备的分辨率，以dpi(Dots Per Inch)或者dpcm(Dots Per Centimeter)表示

这几个属性中，最常用的就属width了，在使用时也可以加上min-和max-前缀，组成更多的条件表达式。下面这几个查询就是width的应用：

@media screen and (width: 320px) {
    /* styles adapted to devices which (width == 320px) */
}
@media screen and (min-width: 320px) {
    /* styles adapted to devices which (width >= 320px) */
}
@media screen and (max-width: 960px) {
    /* styles adapted to devices which (width <= 960px) */
}

如代码所示，上面的三个表达是分别表示匹配宽度正好等于320px的情况，匹配宽度大于等于320px的情况，匹配宽度小于等于960px的情况，实际开发中我们可根据设计需要声明相对应的查询条件。除了px之外，我们也可以使用em或rem来表示匹配的宽度。
在上面的代码中，我们使用了一个and逻辑关键字将前后的表达式连接起来，这是很常见的用法，另外还有not和only。其中not用于对整个表达式的结果取反，如果我们希望匹配320px及以下宽度的设备，下面两个表达式是等效的：

@media screen and (max-width: 320px) {
    /* styles */
}
@media not screen and (min-width: 320px) {
    /* styles */
}

而only用于兼容老版本的浏览器。对于老版本的浏览器，是不支持媒介查询的，但也会尝试下载这些样式，这时候我们可以使用only关键字，对老版本的浏览器隐藏媒介查询，使之忽略这些样式，而对于那些高版本的浏览器，则会继续处理带有only关键字的查询语句，使用时就像下面这样声明：

@media only screen and (min-width: 320px) {
    /* styles */
}

另外还存在一个类似or的逻辑，如果希望在多个查询中只要存在有匹配的语句就去应用指定的样式，我们可以使用逗号来表示，这跟普通CSS代码中的使用方式是一样的：

@media screen and (min-width: 320px), @media print {
    /* styles */
}

内嵌样式和外联样式

上面介绍了媒介查询的基本语法和使用方式，下面我们接着了解一下两种不同的引入方式，即内嵌和外联。
内嵌样式比较简单，直接把媒介查询的样式和通用样式写在一起，比如我们要在宽度超过1280px的情况下为链接加上下划线，可以像下面这样：

a {