CSS媒体查询（@media）全面解析
随着移动设备的快速普及，用户不再只是通过传统的电脑系来浏览 web 内容，越来越多的用户开始使用各种尺寸的智能手机、平板电脑或者其它设备来浏览 Web 内容，为了确保使用不同设备的用户都能拥有不错的体验就需要用到媒体查询。
创新互联建站服务项目包括莱阳网站建设、莱阳网站制作、莱阳网页制作以及莱阳网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，莱阳网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到莱阳省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
媒体查询是 CSS 样式表最重要的功能之一，所谓媒体查询指的就是根据不同的媒体类型（设备类型）和条件来区分各种设备（例如：电脑、手机、平板电脑、盲文设备等），并为它们分别定义不同的 CSS 样式。媒体查询能让 CSS 可以更精确的作用于不同的设备或同一设备的不同条件，让所有用户都能得到很好的用户体验。
1. 媒体类型
媒体类型用来表示设备的类别，CSS 中提供了一些关键字来表示不同的媒体类型，如下表所示：
| 媒体类型 | 描述 |
|---|---|
| all | 表示所有的媒体设备 |
| aural | 表示语音和音频合成器（听觉设备） |
| braille | 表示盲人用点字法触觉回馈设备 |
| embossed | 表示盲人用点字法打印机 |
| handheld | 表示小型手持设备，如手机、平板电脑 |
| 表示打印机 | |
| projection | 表示投影设备 |
| screen | 表示电脑显示器 |
| tty | 表示使用固定密度字母栅格的媒体，比如打字机或终端设备 |
| tv | 表示电视机类型的设备 |
2. 媒体特性
除了具体的类型外，还可以通过一些属性来描述设备的具体特征，例如宽度、高度、分辨率等，如下表所示：
| 值 | 描述 |
|---|---|
| aspect-ratio | 输出设备页面可见区域的宽高比 |
| color | 输出设备每个像素的比特值，常见的有 8、16、32 位。如果设备不支持输出彩色，则该值为 0 |
| color-index | 输出设备的颜色查询表中的条目数量。如果没有使用颜色查询表，则该值等于 0 |
| device-aspect-ratio | 输出设备的宽高比 |
| device-height | 输出设备屏幕的可见高度 |
| device-width | 输出设备屏幕的可见宽度 |
| grid | 查询输出设备使用的是网格屏幕还是点阵屏幕 |
| height | 页面可见区域的高度 |
| max-aspect-ratio | 输出设备屏幕可见区域宽度与高度的最大比率 |
| max-color | 输出设备每个像素比特值的最大值 |
| max-color-index | 输出设备的颜色查询表中的最大条目数 |
| max-device-aspect-ratio | 输出设备屏幕可见区域宽度与高度的最大比率 |
| max-device-height | 输出设备屏幕可见区域的最大高度 |
| max-device-width | 输出设备屏幕的最大可见宽度 |
| max-height | 页面可见区域的最大高度 |
| max-monochrome | 输出设备单色帧缓冲区中每个像素的最大位深度。如果设备并非黑白屏幕，则该值为 0 |
| max-resolution | 设备的最大分辨率 |
| max-width | 页面可见区域的最大宽度 |
| min-aspect-ratio | 输出设备屏幕可见区域宽度与高度的最小比率 |
| min-color | 输出设备每个像素比特值的最小值 |
| min-color-index | 输出设备的颜色查询表中的最小条目数 |
| min-device-aspect-ratio | 输出设备的屏幕可见区域宽度与高度的最小比率 |
| min-device-width | 输出设备的屏幕的最小可见宽度 |
| min-device-height | 输出设备的屏幕的最小可见高度 |
| min-height | 页面可见区域的最小高度 |
| min-monochrome | 输出设备单色帧缓冲区中每个像素的最小位深度。如果设备并非黑白屏幕，则该值为 0 |
| min-resolution | 设备的最小分辨率 |
| min-width | 页面可见区域的最小宽度 |
| monochrome | 输出设备单色帧缓冲区中每个像素的位深度。如果设备并非黑白屏幕，则该值为 0 |
| orientation | 页面可见区域的旋转方向 |
| resolution | 设备的分辨率。如：96dpi、300dpi、118dpcm |
| scan | 电视类设备的扫描工序 |
| width | 页面可见区域的宽度 |
3. 逻辑操作符
逻辑操作符包含 not、and 和 only 三个，通过逻辑操作符可以构建复杂的媒体查询，您还可以通过逗号来分隔多个媒体查询，将它们组合为一个规则。
- and：用于将多个媒体查询组合成一条媒体查询，当每个查询规则都为真时则该条媒体查询为真，另外通过 and 操作符还可以将媒体特性与媒体类型结合在一起；
- not：用于否定媒体查询，当查询规则不为真时则返回 true，否则返回 false。如果使用 not 操作符，则还必须指定媒体类型；
- only：仅在整个查询匹配时才会生效，当不使用 only 时，旧版的浏览器会将 screen and (max-width: 500px) 简单地解释为 screen，忽略查询的其余部分，并将样式应用于所有屏幕。 如果使用 only 运算符，则还必须指定媒体类型。
4. 定义媒体查询
目前您可以通过以下两种方式来定义媒体查询：
- 使用 @media 或 @import 规则在样式表中指定对应的设备类型；
- 用 media 属性在