CSS 媒体类型

CSS媒体类型指的是指定CSS样式应用的设备类型或媒体类型。它允许我们为不同的设备类型或媒体类型设置不同的样式表，以便更好地适应不同的设备或媒体。

在CSS中，媒体类型可以通过@media规则来实现，具体的语法格式如下：

@media 媒体类型 {
    
    
  /* 样式定义 */
}

例如，我们可以为print媒体类型定义一个样式表：

@media print {
    
    
  h1 {
    
    
    font-size: 28px;
    color: #000;
    text-align: center;
  }
}

上面的代码中，我们为print媒体类型指定了一个h1标题样式，打印时标题将会居中显示。

CSS媒体类型可以分为以下几类：

all媒体类型：用于所有媒体设备。如果没有指定媒体类型，那么all媒体类型是默认的。
print媒体类型：用于打印机或打印预览中显示的文档。
screen媒体类型：用于电脑屏幕或其他使用屏幕显示设备的设备类型。
speech媒体类型：用于屏幕阅读器等语音合成设备。

除了上述提到的四种媒体类型，CSS还定义了许多其他的媒体特性，如width（宽度）、height（高度）、color（颜色）等，我们可以根据这些特性为不同的设备和媒体提供不同的CSS样式。例如，我们可以使用媒体查询根据设备的宽度、高度、方向等参数为其设定CSS样式。

@media 规则

CSS中的@media规则是媒体查询的一部分，用于为不同的媒体类型/设备应用不同的样式。

它的基本语法如下：

@media media_type {
    
    
  /* CSS for the specified media type */
}

例如，如果我们想为宽度为768px或更小的设备设置不同的样式，可以这样写：

@media only screen and (max-width: 768px) {
    
    
  body {
    
    
    background-color: lightblue;
  }
}

在这个例子中，当浏览器窗口的宽度为768px或更小时，背景颜色会从默认的颜色更改为浅蓝色。

除了screen，还可以有其他的媒体类型，如handheld（用于手机或平板等手持设备）和print（用于打印内容）。例如：

@media handheld {
    
    
  /* CSS for mobile or handheld devices */
}

@media print {
    
    
  /* CSS for printed pages */
}

此外，@media规则还可以与其他的CSS规则一起使用，以实现更为复杂的效果。例如，可以使用@media规则来控制不同大小视图下的样式，或者与其他CSS规则嵌套使用，来实现更为细致的布局和样式设计。

示例 - 根据设备屏幕大小改变样式

以下是一个使用CSS媒体类型来根据设备屏幕大小改变样式的HTML示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 默认样式 */
    body {
      
      
      background-color: lightblue;
    }

    /* 当屏幕宽度小于600px时应用此样式 */
    @media screen and (max-width: 600px) {
      
      
      body {
      
      
        background-color: lightgreen;
      }
    }
  </style>
</head>
<body>
  <h1>这是一个使用CSS媒体类型的示例</h1>
  <p>当屏幕宽度小于600px时，背景颜色将变为浅绿色。</p>
</body>
</html>

在这个示例中，默认样式是将背景颜色设置为浅蓝色。但是，当屏幕宽度小于600px时，@media规则将应用新的样式，将背景颜色更改为浅绿色。这是通过@media screen and (max-width: 600px)查询实现的，它指定了应用样式的条件，即设备是屏幕类型且屏幕宽度小于600px。

其他媒体类型

以下的图表展示了CSS其他媒体类型：

媒体类型	描述
all	用于所有的媒体设备
aural	用于语音和音频合成器
braille	用于盲人用点字法触觉回馈设备
embossed	用于分页的盲人用点字法打印机
handheld	用于小的手持的设备（黑白显示器、单色显示器）
print	用于打印机（不透明介质）
projection	用于方案展示，比如幻灯片（不透明介质）
screen	用于电脑显示器（彩色显示器）
tty	用于使用固定密度字母栅格的媒体，比如电传打字机和终端（可读/可写）
tv	用于电视机类型的设备（彩色的）