Css媒体查询：
媒体查询 是 响应式设计的关键组成部分，这使得根据参数和设备特性调整CSS成为可能。
比如说，媒体查询能够在用户设备屏幕小于一定的尺寸或者保持在横向或者纵向的模式时，提供不同的样式。@media （at-rule CSS样式声明，以@开头）被用作有条件的向文档提供样式。
Window.matchMedia()方法能够针对一个媒体查询测试一个window窗口。你也可以使用 MediaQueryList.addListener()方法随时随地的获取媒体查询变化的通知。通过这个方法，你的网站或者APP可以对设备配置、方向或者状态的改变作出相应。
@media@规则由一个或多个媒体查询组成，每个媒体查询包含一个可选的媒体类型和若干媒体特性。多个查询可通过使用逻辑运算符以多种方式组合起来，且对大小写敏感。当指定的媒体类型与正在显示文档的设备的类型匹配并且所有媒体特征表达式计算为真时，才应用相应的样式。涉及未知媒体类型的查询总是错误的。
注意：即使查询返回false，附有媒体查询的样式表仍然会下载到<link> 标签。但是，直到其查询结果变为真，否则其内容将不适用。
媒体类型：
媒体类型描述设备的一般类别。除非您使用not或only逻辑运算符，否则媒体类型是可选的，并且将隐含使用all类型。
1. all；适用于所有设备。
2. print:为了加载合适的文档到当前使用的可视窗口. 需要提前咨询 pagedmedia（媒体屏幕尺寸）, 以满足个别设备网页尺寸不匹配等问题。
3. screen:主要适用于彩色的电脑屏幕
4. speech:解析speech这个合成器. 注意: CSS2已经有一个相似的媒体类型叫aural.可以看以下附录
语法：
<!-- link元素中的CSS媒体查询 -->
<linkrel="stylesheet" media="(max-width: 800px)"href="example.css" />
<!--样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
逻辑操作符：包括not、and和only等，构建复杂的媒体查询。
1、 and操作符用来把多个媒体属性组合成一条媒体查询，对成链式的特征进行请求，只有当每个属性都为真时，结果才为真。
n and关键字用于合并多个媒体属性或合并媒体属性与媒体类型。一个基本的媒体查询，即一个媒体属性与默认指定的all媒体类型，可能像这样子：
@media (min-width:700px) { ... }
n 如果你只想在横屏时应用这个，你可以使用 and 操作符合并媒体属性：
(min-width: 700px)and (orientation: landscape) { ... }
n 仅想在电视媒体上应用，你可以使用 and 操作符合并媒体属性：
@media tv and(min-width: 700px) and (orientation: landscape) { ... }
逗号分隔列表：
n 媒体查询中使用逗号分隔效果等同于or逻辑操作符。当使用逗号分隔的媒体查询时，如果任何一个媒体查询返回真，样式就是有效的。逗号分隔的列表中每个查询都是独立的，一个查询中的操作符并不影响其它的媒体查询。这意味着逗号媒体查询列表能够作用于不同的媒体属性、类型和状态。
2、 not操作符用来对一条媒体查询的结果进行取反。
not 关键字应用于整个媒体查询，在媒体查询为假时返回真 (比如 monochrome 应用于彩色显示设备上或一个600像素的屏幕应用于 min-width: 700px 属性查询上 )。在逗号媒体查询列表中not仅会否定它应用到的媒体查询上而不影响其它的媒体查询。 not关键字仅能应用于整个查询，而不能单独应用于一个独立的查询。
n @media not all and (monochrome) { ... }
等价于：@media not (all and(monochrome)) { ... }
而不是：@media (not all)and (monochrome) { ... }
n @media not screen and (color), print and (color)
等价于：@media (not (screen and(color))), print and (color)
3、 only操作符仅在媒体查询匹配成功的情况下被用于应用一个样式，这对于防止让选中的样式在老式浏览器中被应用到。若使用了not或only操作符，必须明确指定一个媒体类型。only关键字防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式：
<linkrel="stylesheet" media="only screen and (color)"href="example.css" />
注意： 表达式需要用圆括号。没有使用的会引起错误。
媒体特性：
大多数媒体属性可以带有“min-”或“max-”前缀，用于表达“最低...”或者“最高...”。
max-width:12450px表示应用其所包含样式的条件最高是宽度为12450px，大于12450px则不满足条件，不会应用此样式。
这避免了使用与HTML和XML冲突的“<”和“>”字符。如果你未向媒体属性指定一个值，并且该特性的实际值不为零，则该表达式被解析为真。
注意：如果浏览器运行的设备上没有该属性值，包含这个属性值的表达式一般返回假。例如，在语音合成器上查询屏幕长宽比总是返回假。
4、 颜色（color）
@media all and (color) {... }//向所有能显示颜色的设备应用样式表：
@media all and(min-color: 4) { ... }//向每个颜色单元至少有4个比特的设备应用样式表：
5、 颜色索引（color-index）
@media all and(color-index) { ... }//向所有使用索引颜色的设备应用样式表，你可以这么做：
<linkrel="stylesheet" media="all and (min-color-index: 256)"href="http://foo.bar.com/stylesheet.css" />//向所有使用至少256个索引颜色的设备应用样式表：
6、 宽高比（aspect-ratio）
@media screen and (min-aspect-ratio:1/1) { ... }//下面为显示区域宽高至少为一比一的设备选择了一个特殊的样式表。
这指定了宽高比或者1：1或者更大。换句话说，可视区域或者是正方形或者是宽屏。
7、 设备宽高比（device-aspect-ratio）
下面为宽屏设备选择了一个特殊的样式表。
@media screen and(device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
8、 设备高度（device-height）：向显示在最大宽度800px的屏幕上的文档应用样式表，你可以这样做：<link rel="stylesheet" media="screen and(max-device-width: 799px)" />
9、 设备宽度（device-width）：描述了输出设备的宽度（整个屏幕或页的高度，而不是仅仅像文档窗口一样的渲染区域）。
10、 网格（grid）：判断输出设备是网格设备还是位图设备。如果设备是基于网格的（例如电传打字机终端或只能显示一种字形的电话），该值为1，否则为0。
不支持前缀min，max示例
向一个15字符宽度或更窄的手持设备应用样式：
@media handheld and(grid) and (max-width: 15em) { ... }
注意：“em” 在网格设备中有不同的意义；一个“em”的实际宽度不得而知，假设1em相当于一个网格单元的宽高。
11、 高度height 媒体属性描述了输出设备渲染区域（如可视区域的高度或打印机纸盒的高度）的高度。
注意：用户调整窗口大小后，火狐浏览器会根据使用了width和height属性的媒体查询来切换合适的样式表。
12、 黑白monochrome：
向所有黑白设备应用样式表：@media all and(monochrome) { ... }
向每个像素至少8比特的黑白设备应用样式表：
@media all and(min-monochrome: 8) { ... }
13、 方向（orientation）：不支持前缀@mediaall and (orientation: portrait) { ... }
14、 分辨率（resolution）
@media print and(min-resolution: 300dpi) { ... }
替换老旧的(min-device-pixel-ratio: 2) 语法：
@media screen and(min-resolution: 2dppx) { ... }
15、 扫描（scan）：向以顺序方式扫描的电视机上应用样式表：不支持前缀
向以顺序方式扫描的电视机上应用样式表：
@media tv and (scan:progressive) { ... }
16、 宽度（width）：
如果你想向最小宽度20em的手持设备或屏幕应用样式表，你可以使用这样的查询：
@media handheld and (min-width: 20em),screen and (min-width: 20em) { ... }
这个媒体查询将向最小宽度8.5英寸的打印机应用样式表：
<linkrel="stylesheet" media="print and (min-width: 8.5in)"
href="http://foo.com/mystyle.css"/>
这个查询适用于宽度在500px和800px之间的屏幕：
@media screen and(min-width: 500px) and (max-width: 800px) { ... }