CSS 媒体类型

CSS 媒体类型是一种用于指定不同设备或媒体类型的样式表的方法。通过使用媒体类型，我们可以为不同的设备或媒体类型定制不同的样式，以确保网页在不同设备上都能正常显示。

基本概念

在 CSS 中，我们可以使用 @media 规则来定义不同的媒体类型。语法如下：

@media mediatype and (mediafeature) {
  /* CSS样式规则 */
}

其中，mediatype 可以是以下几种类型之一：

• all: 所有设备
• print: 打印设备
• screen: 屏幕设备
• speech: 屏幕阅读器

mediafeature 可以是一些媒体特性，如屏幕宽度、设备方向等。我们可以根据不同的媒体特性来定制不同的样式。

示例

下面是一个简单的示例，当屏幕宽度小于 600px 时，段落文本颜色变为红色：

@media screen and (max-width: 600px) {
  p {
    color: red;
  }
}

在上面的示例中，我们使用 @media 规则来指定屏幕设备，并且设定了一个 max-width 的媒体特性，当屏幕宽度小于 600px 时，应用这段样式。

常用媒体特性

除了屏幕宽度之外，还有一些常用的媒体特性可以用来定义不同的样式：

• max-width: 最大宽度
• min-width: 最小宽度
• orientation: 设备方向
• min-resolution: 最小分辨率
• max-resolution: 最大分辨率

通过合理地运用媒体类型和媒体特性，我们可以为不同设备提供最佳的用户体验。