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 属性在
1) @media
在《CSS @规则》一节中我们已经简单了解 @media，使用 @media 您可以指定一组媒体查询和一个 CSS 样式块，当且仅当媒体查询与正在使用的设备匹配时，指定的 CSS 样式才会应用于文档。示例代码如下：
/* 在小于或等于 992 像素的屏幕上，将背景色设置为蓝色 */ @media screen and (max-width: 992px) { body { background-color: blue; } } /* 在 600 像素或更小的屏幕上，将背景色设置为橄榄色 */ @media screen and (max-width: 600px) { body { background-color: olive; } }2) @import
@import 用来导入指定的外部样式文件并指定目标的媒体类型，示例代码如下：
@import url("css/screen.css") screen; /* 引入外部样式，该样式仅会应用于电脑显示器 */ @import url("css/print.css") print; /* 引入外部样式，该样式仅会应用于打印设备 */ body { background: #f5f5f5; line-height: 1.2; }注意：所有 @import 语句都必须出现在样式表的开头，而且在样式表中定义的样式会覆盖导入的外部样式表中冲突的样式。
3) media 属性
您还可以在
/* 当页面宽度大于等于 900 像素时应用该样式 */
/* 当页面宽度小于等于 600 像素时应用该样式 */
提示：在 media 属性中您还可以指定多种媒体类型，每种媒体类型之间使用逗号进行分隔，例如 media=”screen, print”。
转自：CSS媒体查询（@media）全面解析
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/207668.html原文链接：https://javaforall.net
![Claude Code VS Code教程[项目代码]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg)
