在CSS3中添加的媒体查询，允许内容的呈现针对一个特定范围的输出设备而定制，而不必改变内容本身。
Media Queries能在不同的条件下使用不同的样式，使用页面达到不同的渲染效果。
[MDN CSS媒体查询](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries#分辨率（resolution）)
### 媒体类型
1. all 所有媒体
2. braille 盲文触觉设备
3. embossed 盲文打印机
4. print 手持设备
5. projection 打印预览
6. screen 彩屏设备
7. speech ‘听觉’类似的媒体类型
8. tty 不适用像素的设备
9. tv 电视
[媒体类型](http://www.runoob.com/css/css-mediatypes.html)
~~~
@media screen {
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print {
p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print {
p.test {font-weight:bold;}
}
/*移动端样式*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
~~~
sans - serif 字体比较适合在屏幕上阅读，而 serif 字体更容易在纸上阅读。
媒体查询包含一个可选的媒体类型和零个或多个满足CSS3规范的表达式.
* 表达式描述了媒体特征, 最终会被解析为 true 或 false.
* 如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型, 并且所有的表达式的值都是 true, 那么该媒体查询的结果为 true
~~~
<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
~~~
逻辑操作符
可以使用 not，and 和 only 等逻辑操作符构建复杂的媒体查询。
1. and 操作符用来把多个 媒体属性 组合成一条媒体查询。只有当每个属性都为真时，结果才为真。
2. not 操作符用来对一条媒体查询的结果进行取反。
3. only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。
若使用了 not 或 only 操作符，必须明确指定一个媒体类型。默认为 all 所有媒体类型。
and 用于合并多个媒体属性或合并媒体属性与媒体类型
~~~
@media (min-width: 700px) and (orientation: landscape) { ... }
@media tv and (min-width: 700px) and (orientation: landscape) { ... }
/* 逗号分隔相当于or操作符 */
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
~~~
not 用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备
~~~
<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />
~~~
only 仅在媒体查询匹配成功的情况下应用指定样式
~~~
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
~~~
### 语法
~~~
@media mediatype and | not | only (media feature) { css-code; }
~~~
### 常用媒体属性
1. 设备宽度：device-width | min-device-width | max-device-width
2. 设备高度：device-height | min-device-height | max-device-height
3. 设备宽度比：device-aspect-ratio: 16/9
4. 设备方向：orientation: portrait / landscape
5. 设备输出分辩率：min-resolution: 300dpi | min-resolution: 2dppx
6. 屏幕像素比：min-device-pixel-ratio: 2 | min–moz-device-pixel-ratio | -webkit-min-device-pixel-ratio
7. 渲染区域的宽度： width | min-width | max-width
8. 渲染区域的高度： height | min-height | max-height
设备输出分辩率(打印分辩率)：dpi, dpcm, dppx
指定输出设备的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每厘米（dpcm）的点数来表示。
每英寸包含点的数量（dots per inch）
普通屏幕通常包含96dpi，一般将2倍于此的屏幕称之为高分屏，即大于等于192dpi的屏幕，比如Mac视网膜屏就达到了192dpi（即2dppx），打印时一般会需要更大的dpi；
1dppx = 96dpi
1dpi ≈ 0.39dpcm
1dpcm ≈ 2.54dpi
[分辨率PPI与DPI](http://blog.csdn.net/wuyao721/article/details/5286753)
Media query只接受单个的逻辑表达式作为其值或者没有值
Media Query其中的大部分接受min/max前缀，用来表示其逻辑关系，表示应用于大于等于或者小于等于某个值的情况著作权归作者
### 横竖屏的判断
~~~
@media (orientation : landscape){ /* 横屏 */ }
@media (orientation : portrait){ /* 竖屏 */ }
~~~
注意部分 Android 中有bug
当输入框获得焦点，触发弹出键盘后，横屏的样式出现了，然而他使用的是竖屏，并未把手机横过来。
添加宽度限制，屏幕宽度大于450px时，并且是横屏时，应用横屏样式
~~~
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape){
// CSS Style
}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait){
// CSS Style
}
~~~
### 高清图片适配
在普通屏下使用@1x图片，在高清屏下使用@2x图片
~~~
/* 普通显示屏(设备像素比例小于等于1.3)使用1倍的图 */
.bg{
background-image: url(img_1x.png);
}
/* 高清显示屏(设备像素比例大于等于1.5)使用2倍图 */
@media
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-resolution: 120dpi),
only screen and (min-resolution: 1.25dppx){
ratio:1.5){
.bg{
background-image: url(img_2x.png);
}
}
~~~
### 屏幕适配
移动端配合 rem 使用，适配不同宽度的屏幕
~~~
html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}
~~~
### 适配独立的样式文件
~~~
<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
~~~
### 设备判断
~~~
@media screen and (device-aspect-ratio: 40/71) {}
或者：
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){}
~~~
### 调整模块的样式
~~~
@media screen and (max-width: 980px) {
#pagewrap {
width: 95%;
}
#content {
width: 60%;
padding: 3% 4%;
}
#sidebar {
width: 30%;
}
#sidebar .widget {
padding: 8% 7%;
margin-bottom: 10px;
}
}
~~~
### Media所有参数汇总
~~~
width: 浏览器可视宽度。
height: 浏览器可视高度。
device-width: 设备屏幕的宽度。
device-height: 设备屏幕的高度。
orientation: 检测设备目前处于横向还是纵向状态。
aspect-ratio: 检测浏览器可视宽度和高度的比例。(例如：aspect-ratio: 16/9)
device-aspect-ratio: 检测设备的宽度和高度的比例。
color: 检测颜色的位数。（例如：min-color: 32就会检测设备是否拥有32位颜色）
color-index: 检查设备颜色索引表中的颜色，他的值不能是负数。
monochrome: 检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）
resolution: 检测屏幕或打印机的分辨率。(例如：min-resolution: 300dpi或min-resolution: 118dpcm)。
grid: 检测输出的设备是网格的还是位图设备。
~~~
