CSS 媒体查询

CSS 媒体查询是 CSS3 中的一个功能，允许您为不同的媒体类型（例如屏幕，打印机，语音合成器等）和媒体特征（例如屏幕大小，分辨率，方向等）设置不同的样式。

例如，如果您想要仅在屏幕宽度不超过 480px 时显示特定内容，可以使用以下代码：

@media only screen and (max-width: 480px) {
  /* 样式 */
}

在 CSS 媒体查询中，您可以使用以下媒体特征：

1. width - 设备宽度。
2. height - 设备高度。
3. aspect-ratio - 设备宽度与高度的比例。
4. orientation - 设备方向（纵向或横向）。
5. resolution - 设备像素密度。
6. device-width - 用于确定设备的物理宽度的设备独立像素（dp）数。
7. device-height - 用于确定设备的物理高度的设备独立像素（dp）数。

可以使用以下关键字和运算符在媒体查询中指定媒体特征：

1. min-width / min-height / min-aspect-ratio / min-device-width / min-device-height - 特征必须至少达到指定值。
2. max-width / max-height / max-aspect-ratio / max-device-width / max-device-height - 特征必须不超过指定值。
3. only - 查询仅适用于指定的媒体类型。
4. and - 媒体查询中多个条件必须同时成立。

您可以使用不同的媒体特征组合以创建更复杂的媒体查询。例如：

@media only screen and (min-width: 480px) and (max-width: 768px) {
  /* 样式 */
}

这意味着，只有当屏幕宽度在 480px 到 768px 之间时，才会应用相关的样式。

在 CSS 媒体查询中，您还可以使用 media type 指定媒体类型。常见的媒体类型有：

1. all - 匹配所有媒体类型。
2. screen - 匹配屏幕。
3. print - 匹配打印机。
4. speech - 匹配语音合成器。

例如：

@media print {
  /* 样式 */
}

表示，当页面被打印时，应该使用的样式。

请注意，如果没有指定 media type，则默认使用 all。

媒体查询是 CSS 的强大功能，它允许您为不同的媒体类型和特征创建不同的样式。您可以创建响应式，自适应的网页，以适应不同大小的屏幕，从而使页面看起来更好。

请注意，媒体查询仅在支持 CSS3 的浏览器中生效。