1. all:适用于所有媒体设备。
@media all {
/* 样式规则适用于所有媒体设备 */
body {
font-family: Arial, sans-serif;
}
}
2. print:适用于打印机和打印预览。
@media print {
/* 样式规则适用于打印机和打印预览 */
body {
font-size: 12pt;
}
}
3. screen:适用于计算机屏幕、平板电脑、智能手机等。
@media screen {
/* 样式规则适用于屏幕显示 */
body {
background-color: #f4f4f4;
}
}
4. speech:适用于屏幕阅读器等语音合成设备。
@media speech {
/* 样式规则适用于语音合成设备 */
p {
voice-family: Alice,serif;
}
}
这只是一小部分媒体类型的示例,还有其他一些特定的媒体类型。媒体查询允许你更灵活地指定样式规则,并根据不同条件应用不同的样式。例如,你可以根据屏幕宽度、设备方向或分辨率来定义样式规则。以下是一个简单的媒体查询示例:
@media screen and (max-width: 600px) {
/* 在屏幕宽度小于或等于 600px 时应用的样式规则 */
body {
font-size: 14px;
}
}
这将在屏幕宽度小于或等于600像素时应用body元素的样式规则。
转载请注明出处:http://www.zyzy.cn/article/detail/12548/CSS