Media Query 简介
Media Query 即媒体查询，借助其可实现响应式设计。Meidia Queries，该网站收集了很多优秀的 RWD(Responsive web design) 的网站。
在 HTML4 和 CSS2 只支持对于不同的媒体类型来设置样式，而 Media Query 扩充了 Media Type 的功能，并且使我们能够更精准的应用样式表。
浏览器兼容性
| 浏览器 | IE | Edge | Firefox | Chrome | Safari |
|---|---|---|---|---|---|
| 版本 | 8+ | ? | 21 | 3.5 | 4 |
Polyfill
浏览器向下兼容可用该库：respond.js
该插件已经停止维护，请谨慎使用
媒体类型 Media Type
W3C共列出了10中媒体类型。
| 类型 | 解释 |
|---|---|
all |
所有设备 |
screen |
彩色电脑屏幕 |
speech |
语音合成器 |
print |
文档打印或打印预览模式 |
braille |
|
embossed |
|
handheld |
|
projection |
|
tty |
|
tv |
注意：CSS2.1 和 CSS3 media query 定义了
tty,tv,projection,handheld,braille,embossed,aural这些 Media Type，但是它们在 Media Query Level 4 中都废弃了，所以不推荐使用了。
属性（Media Feature）
| 属性 | 值 | MIN/MAX前缀 | 描述 |
|---|---|---|---|
color |
整数 | yes | 每种色彩的字节数 |
color-index |
整数 | yes | 色彩表中的色彩数 |
aspect-ratio |
整数/整数 | yes | 宽高的比值 |
device-aspect-ratio |
整数/整数 | yes | 宽高比例 |
device-width |
length | yes | 设备屏幕的输出宽度 |
device-height |
length | yes | 设备屏幕的输出高度 |
grid |
整数 | no | 是否是基于格栅的设备 |
width |
length | yes | 渲染界面的宽度 |
height |
length | yes | 渲染界面的高度 |
monochrome |
整数 | yes | 单色帧缓冲器中每像素字节 |
resolution |
分辨率(“dpi/dpcm”) | yes | 分辨率 |
scan |
Progressive interlaced | no | tv媒体类型的扫描方式 |
orientation |
Portrait/landscape | no | 横屏或竖屏 |
| overflow-block | 这是如何沿着溢出块轴视输出设备句柄的内容 | ||
| overflow-inline | 可以在溢出沿字形轴视内容进行滚动 | ||
| resolution | 输出设备的分辨率，使用DPI或DPCM | ||
| scan | 输出设备的扫描过程 | ||
| update-frequency | 如何能迅速输出设备修改内容的外观 |
Media Queries Level 4
color 与 color-index
color 描述的是设备的色彩深度，如果设备不是彩色设备，则值为 0，黑白设备的话就是 1。
color-index 指色指数，至于什么是色指数，请看这里，反正我看完维基百科的词条后，觉得这辈子用上这个属性的概率基本为零。
orientation
@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }
aspect-ratio 与 device-aspect-ratio
device-aspect-ratio 定义的是 device-width 与 device-height 的比值，而 aspect-ratio 定义的是 width 与 height 也就是 viewport 的宽高比值，该属性在应付 Android 设备很有效。
比如，具有1280*720像素的设备（也就是“16：9”），则以下媒体查询全都是匹配的：
@media screen and (device-aspect-ratio: 16/9) { … }
@media screen and (device-aspect-ratio: 32/18) { … }
@media screen and (device-aspect-ratio: 1280/720) { … }
@media screen and (device-aspect-ratio: 2560/1440) { … }
引入方式
link 方法引入
<link rel="stylesheet" type="text/css" media="all and (max-width: 600px)" href="style.css" />
XML 方式引入
<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ?>
@import 方式引入
<style>
@import url("style/print.css") print;
@import url(style/style.css) screen;
</style>
不过我们应该尽量避免使用 @import 语法。
@media 方式引入
@media screen and (max-width: 1920px) {
/* CSS Rules used when query matches */
}
style 方式引入
<style type="text/css" media="screen and (max-width: 1920px)">
/* CSS Rules used when query matches */
</style>
逻辑运算符
各个条件可以用逻辑运算符号连接起来。
and 关键词
and关键字用于合并多个媒体属性或合并媒体属性与媒体类型。
<style>
/*这两者是等价的*/
@media (max-width: 1920px) and (min-width: 1366px) {
/* CSS Rules used when query matches */
}
</style>
Or 关键字
媒体查询中使用逗号分隔效果等同于 or 逻辑操作符。当使用逗号分隔的媒体查询时，如果任何一个媒体查询返回真，样式就是有效的。逗号分隔的列表中每个查询都是独立的，一个查询中的操作符并不影响其它的媒体查询。这意味着逗号媒体查询列表能够作用于不同的媒体属性、类型和状态。
or与,的作用是等价的，个人建议用,，比较容易辨识。
<style>
/*这两者是等价的*/
@media (max-width: 1920px),(min-width: 1366px) {
/* CSS Rules used when query matches */
}
@media (max-width: 1920px)or(min-width: 1366px) {
/* CSS Rules used when query matches */
}
</style>
not 关键字
not 关键字是用来排除某种制定的媒体类型。not 是对整个 media query 进行否定，不能对单个 media feature 否定。
@media not screen and (color), print and (color) {}
/* 等同于 */
@media (not (screen and (color))), print and (color) {}
only 关键字
用来定某种特别的媒体类型。对于支持 media query 的移动设备来说，如果存在only 关键字，移动设备的浏览器会忽略 only 关键字并直接根据后面的表达式应用样式文件。对于不支持 media query 的设备但能够读取 media type 类型的浏览器，遇到 only 关键字时会忽略这个样式文件。
另外 only 必须位于 media query 的开头。