CSS 媒体类型
以下是 CSS 媒体类型（Media Types） 的中文详解，帮助你理解如何根据不同设备或输出环境应用不同的样式。
一、什么是媒体类型？
媒体类型用于告知浏览器或其他用户代理（如打印机、屏幕阅读器）当前样式表或某段样式应当在哪些媒介下生效。它是 CSS 媒体查询的基础，也是早期将样式表分发给不同设备的手段。
二、常见媒体类型列表
| 媒体类型 | 含义 |
|---|---|
all | 适用于 所有 设备（默认值） |
screen | 适用于 计算机屏幕、平板、手机 等彩色屏幕设备 |
print | 适用于 打印机 及打印预览 |
speech | 适用于 屏幕阅读器 等语音合成设备 |
projection | 适用于 投影仪（如演示文稿） |
handheld | 适用于 早期移动设备，但现代浏览器已不推荐使用 |
braille | 适用于 盲文阅读器 |
embossed | 适用于 盲文打印机 |
aural | 已废弃，原为针对 语音合成 的媒体类型（改用 speech） |
注意： 除
all、screen、speech外，其它类型的支持非常有限，多数场景下可忽略或使用媒体查询功能替代。
三、在 <link> 与 @import 中使用
1. <link> 标签
<!-- 仅在打印时加载 print.css -->
<link rel="stylesheet" href="print.css" media="print">
<!-- 在屏幕和打印时都加载 screen-print.css -->
<link rel="stylesheet" href="screen-print.css" media="screen, print">
2. @import 规则
/* 仅在屏幕设备加载 */
@import url("screen.css") screen;
/* 在所有设备加载 */
@import url("common.css") all;
/* 在打印设备加载 */
@import url("print.css") print;
四、与媒体查询结合使用
虽然媒体类型本身能区分大类媒介，但更常用的是 媒体查询：
@media screen and (max-width: 600px) {
/* 小屏幕手机样式 */
}
@media print and (orientation: landscape) {
/* 打印横向时的样式 */
}
- 逻辑运算：
and、or（用逗号分隔）、not - 特性查询：
(min-width: ...)、(resolution: ...)、(prefers-color-scheme: dark)等
媒体类型通常写在查询的最前面，如 @media print and (min-resolution: 300dpi)。
五、使用场景
- 打印优化：将页面转换为打印友好的布局，如隐藏导航、调整字体、分页
- 色彩模式：在语音输出或盲文设备上提供辅助样式
- 多媒体展示：为投影仪或大屏幕演示提供更大字号和高对比度
- 渐进增强：在不支持某些特性的设备上降级到基本布局
六、浏览器支持
| 媒体类型 | 主流浏览器支持情况 |
|---|---|
all | ✅ 全部支持 |
screen | ✅ 全部支持 |
print | ✅ 全部支持 |
speech | ✅ 大部分现代屏幕阅读器支持 |
| 其他类型 | ⚠️ 支持较少，建议使用媒体查询 |
七、最佳实践
- 优先使用媒体查询 而非依赖罕见的媒体类型。
- 将打印样式抽离 到单独文件，通过
media="print"或@media print加载；保持页面在打印时简洁、高可读性。 - 避免使用已废弃类型（如
aural、handheld），可用speech或功能查询代替。 - 为不同输出形式（屏幕、打印、朗读）设计专门的样式，以提高可访问性和用户体验。
通过掌握 CSS 媒体类型，你可以更精细地控制在哪些环境下加载或应用特定样式，为多样化的用户设备和输出方式提供最佳体验。