CSS 媒体类型

1. 介绍CSS媒体类型

CSS媒体类型是一种控制网页在不同设备上呈现方式的方法。它让我们可以根据不同设备（例如电脑、平板电脑、智能手机等）的不同特征来针对性地设置样式。这个特性可以帮助我们在不同平台上实现良好的用户体验。

1.1 常见的媒体类型

CSS定义了多种媒体类型，包括了：

/* 打印机 */
@media print {
  /* styles go here */
}
/* 屏幕 */
@media screen {
  /* styles go here */
}
/* 手持设备 */
@media handheld {
  /* styles go here */
}
/* 语音合成器 */
@media speech {
  /* styles go here */
}

值得注意的是，在使用媒体类型时务必要区分大小写，否则样式将无法正确应用。

1.2 应用场景示例

下面看看一些具体的应用场景示例，以加深我们理解：

1.2.1 媒体查询

媒体查询是指根据不同的媒体类型和媒体特性满足不同的样式需求，比如读取用户的屏幕分辨率。下面的例子是根据屏幕宽度来选择不同的样式：

@media (max-width: 768px) {
  /* 这里的样式仅在屏幕宽度小于等于 768px 时应用 */
}

在这里，我们使用了 `@media` 声明指定了一个条件。条件 `max-width:768px` 含义是当屏幕的宽度小于等于 768px 时应用样式。这使得我们可以针对小型设备应用不同的样式。

1.2.2 打印样式

打印样式是指在打印时不必再口头提示读者怎么样调整格式，而是直接生成符合需要的文档样式。CSS 提供了 "@media print" 媒体类型，让我们可以编写只在打印时显示的样式：

@media print {
  body {
    font-size: 14pt;
  }
}

2. 小结

总之，CSS 媒体类型可让我们针对不同的设备和展示需求进行更加精细的样式设置，以优化用户体验。