CSS3 的媒体类型主要用于定义样式表应用于哪种类型的设备或输出介质。尽管 CSS3 规范并没有增加新的媒体类型，但规范对原有的媒体类型进行了标准化，并且允许使用媒体查询（Media Queries）来组合多个媒体类型和其他条件表达式。
CSS3 的媒体类型
根据 CSS Media Queries Level 4 规范，目前支持的媒体类型如下：
- all：表示所有设备。
- print：表示打印或预览打印。
- screen：表示计算机屏幕和其他类似的显示设备。
- speech：表示语音合成器。
- aural：已经废弃，被
speech替代。 - braille：表示盲文设备。
- embossed：表示凸版印刷设备。
其中，all、print、screen 是最常用的媒体类型。
使用场景
1. 响应式设计
- 场景描述：根据屏幕大小或设备类型自动调整布局和样式。
- 示例：使用媒体查询针对不同屏幕尺寸应用不同的样式。
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
这段代码会在屏幕宽度小于等于 600px 时改变背景颜色。
2. 打印样式
- 场景描述：为打印文档提供不同的样式。
- 示例：使用
print媒体类型来定义打印样式。
@media print {
body {
background-color: white;
font-size: 12pt;
}
h1 {
page-break-before: always;
}
}
这段代码定义了打印时的样式，包括纸张背景颜色、字体大小和页码分割。
3. 语音合成
- 场景描述：为语音合成器提供适当的样式，以提高无障碍访问体验。
- 示例：使用
speech媒体类型来定义语音合成样式。
@media speech {
img {
display: none;
}
}
这段代码会在语音合成器播放时隐藏所有的图片，因为语音合成器不需要显示图片。
底层原理
媒体类型的工作原理是通过 CSS 的 @media 规则来定义一组样式规则，这些规则只有在满足指定的媒体类型和其他条件时才会生效。媒体类型可以单独使用，也可以与其他媒体特性（如宽度、高度、分辨率等）组合使用，形成更为复杂的媒体查询。
1. 媒体查询
媒体查询允许开发者组合多个媒体类型和媒体特性来定义更具体的条件。例如：
@media screen and (min-width: 600px) and (max-width: 1200px) {
/* styles for medium-sized screens */
}
这段代码定义了一组样式，仅在屏幕宽度介于 600px 到 1200px 之间时生效。
2. 媒体特性
常见的媒体特性包括：
- width：设备的视口宽度。
- height：设备的视口高度。
- orientation：设备的方向（landscape 或 portrait）。
- resolution：设备的分辨率（如
dpi或dpcm）。 - aspect-ratio：设备的宽高比。
- color：设备的最大颜色数。
- scan：视频扫描类型（progressive 或 interlace）。
- monochrome：黑白设备的最大色深（灰度级）。
这些媒体特性可以与媒体类型一起使用，以定义更精细的样式条件。
总结
CSS3 的媒体类型主要用于指定样式表应用于哪种类型的设备或输出介质。通过媒体查询可以组合多个媒体类型和其他条件表达式，以实现更为复杂的样式控制。常见的使用场景包括响应式设计、打印样式和语音合成等。通过这些媒体类型和媒体特性，开发者可以创建更加适应不同设备和环境的网页设计。
