---

CSS3 多媒体查询

CSS3 多媒体查询（Media Query）是一种能够根据设备的屏幕宽度，浏览器大小或其他媒体特性来应用不同的样式表的 CSS 技术。

多媒体查询允许开发者根据设备的特性应用不同的 CSS 样式，以此来实现响应式设计（Responsive Design）。通过响应式设计，能够确保网站在各种不同的设备上都能够正常显示，从而提供一致的用户体验。

基本语法

多媒体查询的基本语法如下：

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

其中，mediateype 指的是媒体类型，可以是 all、screen、print 等等；condition 则是要满足的条件，比如设备的屏幕大小等。

在一个多媒体查询中，可以包含多个条件，比如：

@media (max-width: 600px) and (orientation: portrait) {
  /* 样式规则 */
}

媒体类型

多媒体查询支持的媒体类型包括：

• all：所有设备
• screen：电脑屏幕，不打印
• print：打印机、打印预览
• speech：屏幕阅读器

媒体特性

多媒体查询支持的媒体特性包括：

设备宽高

• width：浏览器宽度
• height：浏览器高度
• device-width：设备屏幕宽度
• device-height：设备屏幕高度

方向

• orientation：设备方向，可以是 portrait（竖屏）或 landscape（横屏）

分辨率

• resolution：设备显示器或屏幕的分辨率，可以是 dpi（每英寸像素数），或 dppx（每 CSS 像素数）

其他

• color：设备颜色深度
• color-index：设备能够显示的颜色数量
• monochrome：设备的单色位数

实例

以下是一个示例，当设备屏幕宽度小于 600px 时，文本颜色变为红色：

@media (max-width: 600px) {
  body {
    color: red;
  }
}

下面的示例是当设备屏幕大小在 600px 和 900px 之间时，文本颜色变为蓝色：

@media (min-width: 600px) and (max-width: 900px) {
  body {
    color: blue;
  }
}

总结

CSS3 多媒体查询是响应式设计的重要组成部分，能够根据不同的设备特性应用不同的 CSS 样式，以此来提供一致的用户体验。我们可以根据设备的屏幕宽度、方向、分辨率等特性来定制样式表，使网站在各种设备上都能够正常显示。