CSS3 @media 查询

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

媒体查询包含了一个媒体类型和CSS3规范中描述的包含一个或多个表达式的媒体属性，这些媒体属性会被解析成真或假。如果媒体查询中的媒体类型与文档要展示的设备相符则查询结果为真，并且当媒体查询中的所有表达式为真时，相关的样式表或样式规则就会按照正常的级联规则被应用。即使媒体查询返回假，媒体查询的样式表仍将被下载，只是不会被应用。大多数媒体属性带有“min-”和“max-”前缀，用于表达“小于等于”和“大于等于”。

@media逻辑操作符

操作符 not，and 和 only 可以用来构建复杂的媒体查询。在不使用 not 或 only 操作符的情况下，媒体类型是可选的，默认为 all 。
and 操作符用来把多个媒体属性组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真。
not 操作符用来对一条媒体查询的结果进行取反。
only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。
若使用了 not 或 only 操作符，必须明确指定一个媒体类型。

若将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真。相当于 or 操作符。

1.and 关键字用于合并多个媒体属性或合并媒体属性与媒体类型。一个基本的媒体查询，即一个媒体属性与默认指定的 all媒体类型，如下所示：

查询可视区域不小于700像素的屏幕：

@media (min-width: 700px) { ... }
查询横屏并且可视区域不小于700像素的屏幕：

(min-width: 700px) and (orientation: landscape) { ... }
查询宽度在500px和800px之间的屏幕：

@media screen and (min-width: 500px) and (max-width: 800px) { ... }
查询仅在电视媒体上，可视区域不小于700像素宽度并且是横屏：

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

2.not 关键字应用于整个媒体查询，在媒体查询为假时返回真 (比如 monochrome 应用于彩色显示设备上或一个600像素的屏幕应用于 min-width: 700px 属性查询上 )。在逗号媒体查询列表中 not 仅会否定它应用到的媒体查询上而不影响其它的媒体查询。 not 关键字仅能应用于整个查询，而不能单独应用于一个独立的查询。例如，not 在下面的查询中最后被计算：

@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)

3.only 关键字防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式：

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

　　媒体查询中使用逗号分隔效果等同于or逻辑操作符。当使用逗号分隔的媒体查询时，如果任何一个媒体查询返回真，样式就是有效的。逗号分隔的列表中每个查询都是独立的，一个查询中的操作符并不影响其它的媒体查询。这意味着逗号媒体查询列表能够作用于不同的媒体属性、类型和状态。

例如，如果你想在最小宽度为700像素或是横屏的手持设备上应用一组样式，你可以这样写：

@media (min-width: 700px), handheld and (orientation: landscape) { ... }
如上文，如果是一个800像素宽的屏幕设备，媒体语句将会返回真，因为第一部分相当于 @media all and (min-width: 700px) 将会应用于该设备并且返回真，尽管我的屏幕媒体类型并不与第二部分的手持媒体类型相符。同样地，如果我是一个500像素宽的横屏手持设备，尽管第一部分因为宽度问题而不匹配，第二部分仍会成功，因此整个媒体查询返回真。

附上MDN地址：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries