CSS Media 查询

引言

借助 CSS 中的媒体，我们可以使用媒体查询为不同的设备应用不同的样式。借助媒体查询，我们还可以检查设备的宽高、分辨率和方向（纵向/横向）。

CSS 规则的主要目的是使网页更具响应性，以针对不同的屏幕尺寸提供优化的设计。借助媒体查询，我们还可以为屏幕阅读器指定样式。

语法

我们可以借助以下语法编写媒体查询。

使用的关键词

以下是编写媒体查询时将使用的一些关键词。它们如下。

• not: 借助此关键词，我们可以撤销整个媒体查询。
• only: 借助此关键词，我们可以防止旧浏览器应用样式属性。
• and: 借助此关键词，我们可以组合两个媒体特性和媒体查询。

媒体类型

媒体查询中有不同类型的媒体可用。它们如下。

• all: 它是媒体类型的默认值。我们可以将其用于所有类型的设备。
• print: 我们可以将其用于打印设备。
• screen: 我们可以将其用于移动或电脑屏幕类型等。
• speech: 我们可以将其用于屏幕阅读器，用于阅读屏幕。

媒体特性

媒体查询使用了许多特性。它们如下。

• any-hover

借助此特性，用户可以悬停在任何元素上。

• any-pointer

借助此特性，我们可以执行用于指向设备的机制。

• aspect-ratio

借助此特性，我们可以设置屏幕视口宽高之间的比例。

• 颜色

借助此特性，我们可以为输出设备的所有组件设置颜色。

• color-gamut

借助此特性，我们可以设置输出设备或用户代理支持的颜色组件范围。

• color-index

借助此特性，我们可以设置要向用户显示的颜色数量。

• 网格

借助此特性，我们可以指定要在网页上显示的行数和列数。

• 高度

借助此特性，我们可以设置将在网页上显示的视口高度。

• hover

借助此特性，用户可以悬停在任何元素上。

• inverted-colors

借助此特性，我们可以为任何设备定义反转颜色。

• light-level

借助此特性，我们可以定义光照水平。

• max-aspect-ratio

借助此特性，我们可以设置在网页上显示视口的最大高度和宽度。

• max-color

借助此特性，我们可以定义将在网页上显示的每个颜色组件的比特数。

• max-color-index

借助此特性，我们可以定义输出设备可以显示的最大颜色数量。

• max-height

借助此特性，我们可以为浏览器的显示区域设置最大高度。

• max-monochrome

借助此特性，我们可以为单色设备定义每个颜色的最大比特数。

• max-resolution

借助此特性，我们可以指定在输出设备中显示的最大分辨率。

• max-width

借助此特性，我们可以为浏览器的显示区域设置最大宽度。

• min-aspect-ratio

借助此特性，我们可以设置在网页上显示视口的最小高度和宽度。

• min-color

借助此特性，我们可以定义将在网页上显示的每个颜色组件的最小比特数。

• min-color-index

借助此特性，我们可以定义输出设备可以显示的最小颜色数量。

• min-height

借助此特性，我们可以为浏览器的显示区域设置最小高度。

• min-resolution

借助此特性，我们可以指定在输出设备中显示的最小分辨率。

• min-width

借助此特性，我们可以为浏览器的显示区域设置最小宽度。

• monochrome

借助此特性，我们可以提供要在单色设备上显示的比特数。

• 导向

借助此特性，我们可以设置视口，使其以横向模式或纵向模式显示。

• overflow-block

借助此特性，我们可以控制内容溢出视口的情况。

• overflow-inline

借助此特性，我们可以控制内联轴上的内容溢出视口的情况。

• 指针

借助此特性，我们可以为指向设备创建主要输入机制。

• 决议

借助此特性，我们可以借助 dpi 或 PCM 为设备设置分辨率。

• scan

借助此特性，我们可以为设备执行扫描过程。

• 更新

借助此特性，我们可以执行输出设备的更新。

• 宽度

借助此特性，我们可以设置视口宽度。

示例

输出

当屏幕分辨率大于 764 像素时，网页如下所示。

当屏幕分辨率小于 764 像素时，网页如下所示。