参考链接

CSS 媒体查询

什么是媒体查询

媒体查询是一项 CSS3 功能，可使网页根据不同的屏幕尺寸和媒体类型调整其样式。

我们可以在各种条件下针对不同的媒体类型。如果条件和/或媒体类型满足，则媒体查询中的规则将被应用。

媒体查询的三个部分

每条媒体查询语句都由一个可选的媒体类型和任意数量的媒体特性表达式构成。可以使用多种逻辑操作符合并多条媒体查询语句。媒体查询语句不区分大小写。

当媒体类型（如果指定）与在其上显示文档的设备匹配并且所有媒体功能表达式都计算为 **true** 时，媒体查询将计算为 true。涉及未知媒体类型的查询始终为 **false**。

注意： 即使媒体查询返回 **false**，带有媒体查询附加到其 <link> 标记的样式表仍将下载。但是，除非查询结果变为 true，否则其内容将不适用。

媒体查询的声明分为以下三个部分:

媒体类型：描述设备
媒体特性 (媒体特征/媒体功能)：描述设备的状态
逻辑操作符：连接多个规则

媒体查询的使用

重要提示：始终将媒体查询放在 CSS 文件的末尾。

显式的使用媒体查询声明样式我们有如下三种方法：

使用 link 引入时使用 media 属性
使用style标签时添加 media 属性
在 CSS 样式中使用条件规则组 @media

<link> 标签媒体查询

<link rel="stylesheet" type="text/css" href="test.css" media="screen and (min-width: 400px)">

<style> 标签媒体查询

<style media="screen and (min-width: 400px)">
    body{ background-color: #000; }
</style>

CSS 样式媒体查询

@media media type and (condition: breakpoint) {
    // CSS rules
}

媒体类型

如果我们不应用媒体类型，@media 规则默认选择所有类型的设备。

否则，将媒体类型紧跟在 @media 规则之后。设备有很多种，常见的 4 类：

all：适用于所有媒体类型
print：用于打印机
screen：用于计算机屏幕、平板电脑和智能手机
speech：用于大声“朗读”页面的屏幕阅读器

媒体特性

属性 + 断点

断点是确定何时更改布局和调整媒体查询中的新规则的关键。

@media (max-width: 480px) {
    .text { font-size: 16px; }
}

这里，断点是 480px。现在媒体查询知道何时设置或覆盖新的类别。如果一个设备的宽度小于 480px，该文本类就会被应用，否则就不会。

逻辑操作符

and：只有连接的两个规则都成立的时候才返回 true
逗号 (,)：连接的两个规则有一个成立的时候就返回 true
not：对于匹配到的媒体查询取反
only：不支持更加高级的媒体类型的浏览器检测到 only 修饰的时候就会抛弃这个规则

and

and 操作符用来把多个媒体属性组合起来，合并到同一条媒体查询中。

只有当每个属性都为真时，这条查询的结果才为真。

在不使用 **not** 或 **only** 操作符的情况下，媒体类型是可选的，默认为 **all**

满足横屏以及最小宽度为700px的条件应用样式表

@media all and (min-width: 700px) and (orientation: landscape) { ... }

由于不使用 not 或 only 操作符的情况下，媒体类型是可选的，默认为 all，所以可以简写为

@media (min-width: 700px) and (orientation: landscape) { ... }

逗号

将多个媒体查询以逗号分隔放在一起。

只要其中任何一个为真，整个媒体语句就返回真，相当于 or (实际上媒体查询没有这个操作符，只是取其意)。

满足最小宽度为700像素或是横屏的手持设备应用样式表

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

not

not 操作符用来对一条媒体查询的结果进行取反。它只会否定要应用的特定媒体查询。

因此，它不会应用于以逗号分隔的媒体查询列表中的每个媒体查询。

**not** 关键字不能用于否定单个功能查询，只能用于否定整个媒体查询。

必须指定媒体类型，不得省略。

@media not all and (monochrome) { ... }

所以上述查询等价于：

@media not (all and (monochrome)) { ... }

而不是：

@media (not all) and (monochrome) { ... }

再看另一个例子，如下媒体查询：

@media not screen and (color), print and (color) { ... }

等价于：

@media (not (screen and (color))), print and (color) { ... }

only

only 关键字可防止不支持带有媒体功能的媒体查询的旧版浏览器应用给定的样式。它对现代浏览器没有影响。

必须指定媒体类型，不得省略。

@media only screen and (max-width:1000px) {...}

上面这行代码，在老式浏览器中被解析为 @media only，因为没有一个叫 only 的设备，所以实际上老式浏览器不会应用样式。

@media screen and (max-width:1000px) {...}

上面这行代码，在老式浏览器中被解析为 @media screen，它把后面的逻辑表达式忽略了。所以老式浏览器会应用样式。

所以，在使用媒体查询时，only最好不要忽略。

补充

相对单位

如果媒体查询 @media 使用的是相对单位，如rem，这里有一个坑需要着重强调一下

一般而言，rem 是相对于 HTML 的字体大小的。但是，由于媒体查询的级别非常高，它并不是HTML的子元素，不是相对于HTML，而是相对于浏览器的，而浏览器的默认字体大小是16px。

如果HTML设置字体大小为12px，设置如下媒体查询

@media only screen and (max-width:1rem) {...}

实际上，max-width 等于16px，而不是 12px。

而正是由于媒体查询是相对于浏览器的，所以使用 rem 就没有必要，完全可以使用 em 来替代。

@media only screen and (max-width:1em) {...}

max 和 min 的基本含义

max 指的是不大于，例如 max-width:1200px = 不大于1200px的时候使用该规则中的样式

min 指的是不小于, 例如 min-width:1200px = 不小于1200px的时候使用规则中的样式