1，写在前面的话

前端的生态很繁荣，技术更新迭代很快，很多新的框架和技术不断在推陈出新，与此同时，在另一方面，随着科技的不断发展，用户获取信息的方式与媒介也越来越多样化，前端产出的内容【页面】就需要去适配多样化的媒介与终端，给用户更好的体验，而在这其中CSS中的媒体查询模块就发挥着重要的作用，让你的产出“响应”用户的不同场景下的信息获取。

2，规范定义

我们先来看下规范的定义

HTML4 [HTML401] and CSS2 [CSS21] currently support media-dependent style sheets tailored for different media types. For example, a document may use different style sheets for screen and print. In HTML4, this can be written as:

HTML4[HTML401] 和CSS2[CSS21] 现在支持针对不同媒体类型定制的设备独立的样式表。比如，一个文档可以为显示屏幕和打印使用不同的样式表。在HTML4中，有两种方式的写法：

第一种写法：

<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"> <link rel="stylesheet" type="text/css" media="print" href="serif.css">

直接在样式表链接里指定样式表应用的媒体类型。

第二种写法：

@media screen { * { font-family: sans-serif } }

在样式表里通过media规则指定某种媒体类型下的样式定义。

The ‘print’ and ‘screen’ media types are defined in HTML4. The complete list of media types in HTML4 is: ‘aural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’. CSS2 defines the same list, deprecates ‘aural’ and adds ‘embossed’ and ‘speech’. Also, ‘all’ is used to indicate that the style sheet applies to all media types.

上面涉及到的两种媒体类型是在HTML4中定义的，HTML4定义完整的媒体类型有： ‘aural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’。CSS2中定义的媒体类型列表和HTML4一样，只是废弃了 ‘aural’，同时增加了 ‘embossed’ 、 ‘speech’。 ‘all’也是用来表明样式定义对所有媒体类型都起作用。

多个用户代理比如浏览器，都支持"特定于媒体"的样式表。 最常媒体类型就是“屏幕”和“打印”。在很多场景下，我们会有更详细地描述样式表应用于哪种类型的输出设备， 幸运的是，HTML4预见了这些请求，并为媒体类型定义了向前兼容的语法，详细见HTML4, section 6.13。

3，应用规则

媒体查询由媒体类型、零个或多个检查特定媒体特性应用判断的表达式组成。除了上诉两种主要方式去应用媒体查询外，我们海可以在@import规则里去应用媒体查询

@import url(color.css) screen and (color);

媒体查询是一个逻辑表达式，可以为true或false。 如果媒体查询的媒体类型与运行用户代理的设备的媒体类型匹配，并且媒体查询中的所有表达式均为true，则媒体查询为true。为适用于所有媒体类型的媒体查询提供了一种简写语法。 可以省略关键字“all”（后跟“and”）。 即 如果未明确指定媒体类型，则为“全部”。例如：

@media all and (min-width:500px) { … }

@media (min-width:500px) { … }

上面这两种写法都是可以的，应用范围也是一样的。

媒体查询是可以组合应用的，可以在媒体查询列表中组合几个。 媒体查询列表以逗号进行分隔。 如果以逗号分隔的列表中的一个或多个媒体查询为true，则整个列表为true，否则为false。 在媒体查询语法中，逗号表示逻辑“或”，而关键字“ and”表示逻辑“与”。

@media screen and (color), projection and (color) { … }

如果媒体查询列表为空（即声明为空字符串或仅由空格组成），则计算结果为true。等同于如下两种定义：

@media all { … }

@media { … }

逻辑非可以通过'not'关键字表示。

<link rel="stylesheet" media="not screen and (color)" href="example.css" />

媒体查询开头出现关键字“否”会否定结果。 也就是说，如果媒体查询在没有'not'关键字的情况下为true，则它将变为false，反之亦然。不支持该关键字的用户代理无法识别“not”关键字，不会应用相关的样式表。

另一个比较常用的关键字就是“only”，关键字“only”还可以用于向较旧的用户代理隐藏样式表。与关键字“not”不同，用户代理必须处理以“only”开头的媒体查询，就好像不存在“only”关键字一样。