CSS2 引入 媒体类型 Media Types
CSS2 引入了 @media 规则，目的是给不同的 媒体类型 media types 定义不同的 样式规则 style rules。
不过 Media Types 并没有被设备支持。
CSS3 引入 媒体类型 Media Queries
Media queries in CSS3 extend the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the device.
Media Queries 扩展了 media types，所不同的是，它查询设备的兼容性，而不是设备的类型。
Media queries 可以用来查询：
- viewport 的宽度和高度
- device 的宽度和高度
- 排列方向（横排或竖排）
- 分辨率
- 更多特性请查看 CSS3 @media Rule 中的 Media Features
Media Query 语法
如下的代码中，当 mediatype 匹配当前设备并且所有的表达式 expressions 都为 true 时，该 Media Query 返回 true，并且大括号中的 CSS-Code 会对当前页面生效。
其中，mediatype 可以为空，为空时，表示匹配任何的设备。
@media not|only mediatype and (expressions)
{
CSS-Code;
}
对于 mediatype，可以有如下的选项：
- all：所有的设备
- print：打印机
- screen：屏幕，包括电脑，平板，手机
- speech：screenreaders 朗读器
具体的使用示例如下：
默认的背景色为 pink，当屏幕宽度大于 480px 时，背景色设为 lightgreen。
body {
background-color: pink;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
我们也可以根据 Media Queries 加载不同的 CSS 文件，语法如下：
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
具体的使用示例如下：
当屏幕宽度小于 400px 时候，加载 tinyScreen.css。
当屏幕宽度在 400px 到 600px 之间时，加载 smallScreen.css。
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />
