CSS中的媒体类型(Media Types)用于定义文档在不同媒体设备上的呈现方式。通过媒体查询(Media Queries),你可以根据设备的特性和特定条件来应用不同的样式。以下是一些常见的CSS媒体类型:

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