1. all:
all 媒体类型适用于所有设备。这是默认的媒体类型,如果未指定媒体类型,样式将适用于所有设备。
/* 适用于所有设备 */
body {
font-size: 16px;
}
2. print:
print 媒体类型适用于打印页面的样式。你可以使用它来定义在打印页面时应用的样式。
/* 适用于打印 */
@media print {
body {
font-size: 12px;
}
}
3. screen:
screen 媒体类型适用于计算机屏幕和其他视觉媒体。这是默认的媒体类型,如果你只想指定在屏幕上应用的样式,通常不需要明确指定。
/* 适用于屏幕 */
@media screen {
body {
background-color: #f0f0f0;
}
}
4. speech:
speech 媒体类型适用于语音合成器。你可以使用它来定义在语音合成设备上应用的样式。
/* 适用于语音合成器 */
@media speech {
h1 {
font-size: 18px;
}
}
媒体查询:
除了单独使用媒体类型,你还可以使用媒体查询来根据不同的设备特性应用样式。
/* 当屏幕宽度小于600像素时应用样式 */
@media screen and (max-width: 600px) {
body {
background-color: #eaeaea;
}
}
这只是 CSS 媒体类型和媒体查询的简要介绍。通过使用这些特性,你可以更好地控制样式在不同媒体和设备上的表现。
转载请注明出处:http://www.zyzy.cn/article/detail/4019/CSS