0%

CSS 媒体查询

发表于 更新于 Valine：

媒体查询（Media queries）被用于根据设备的大致类型（如打印设备与带屏幕的设备）或者特定的特征和设备参数（例如屏幕分辨率和浏览器视窗宽度）来修改网站或应用程序的样式。

媒体类型

媒体类型（Media types）用于描述设备的一般类别。除非使用 not 或 only 逻辑操作符，媒体类型是可选的，默认是 all 类型。

  • all

适用于所有设备。

  • print

适用于在打印预览模式下在屏幕上查看的分页材料和文档。（有关特定于这些格式的格式问题的信息，请参阅分页媒体。）

  • screen

主要用于屏幕。

  • speech

主要用于语音合成器。

注意：此外还有些被废弃的媒体类型：tty、tv、projection、handheld、braille、embossed、aural

媒体特性

媒体特性（Media features）描述了 user agent、输出设备，或是浏览环境的具体特征。媒体特性表达式是完全可选的，它负责测试这些特性或特征是否存在、值为多少。每条媒体特性表达式都必须用括号括起来。

名称 简介 备注
any-hover 是否有任何可用的输入机制允许用户（将鼠标等）悬停在元素上？ 在 Media Queries Level 4 中被添加。
any-pointer 可用的输入机制中是否有任何指针设备，如果有，它的精度如何？ 在 Media Queries Level 4 中被添加。
aspect-ratio 视窗（viewport）的宽高比
color 输出设备每个像素的比特值，常见的有 8、16、32 位。如果设备不支持输出彩色，则该值为 0
color-gamut 用户代理和输出设备大致程度上支持的色域 在 Media Queries Level 4 中被添加。
color-index 输出设备的颜色查询表（color lookup table）中的条目数量，如果设备不使用颜色查询表，则该值为 0
display-mode 应用程序的显示模式，如web app的manifest中的display 成员所指定 在 Web App Manifest spec被定义.
forced-colors 检测是user agent否限制调色板 在 Media Queries Level 5 中被添加。
grid 输出设备使用网格屏幕还是点阵屏幕？
height 视窗（viewport）的高度
hover 主要输入模式是否允许用户在元素上悬停 在 Media Queries Level 4 中被添加。
inverted-colors user agent或者底层操作系统是否反转了颜色 在 Media Queries Level 5 中被添加。
light-level 环境光亮度 在 Media Queries Level 5 中被添加。
monochrome 输出设备单色帧缓冲区中每个像素的位深度。如果设备并非黑白屏幕，则该值为 0
orientation 视窗（viewport）的旋转方向
overflow-block 输出设备如何处理沿块轴溢出视窗(viewport)的内容 在 Media Queries Level 4 中被添加。
overflow-inline 沿内联轴溢出视窗(viewport)的内容是否可以滚动？ 在 Media Queries Level 4 中被添加。
pointer 主要输入机制是一个指针设备吗？如果是，它的精度如何？ 在 Media Queries Level 4 中被添加。
prefers-color-scheme 探测用户倾向于选择亮色还是暗色的配色方案 在 Media Queries Level 5 中被添加。
prefers-contrast 探测用户是否有向系统要求提高或降低相近颜色之间的对比度 在 Media Queries Level 5 中被添加。
prefers-reduced-motion 用户是否希望页面上出现更少的动态效果 在 Media Queries Level 5 中被添加。
prefers-reduced-transparency 用户是否倾向于选择更低的透明度 在 Media Queries Level 5 中被添加。
resolution 输出设备的像素密度（分辨率）
scan 输出设备的扫描过程（适用于电视等）
scripting 探测脚本（例如 JavaScript）是否可用 在 Media Queries Level 5 中被添加。
update 输出设备更新内容的渲染结果的频率 在 Media Queries Level 4 中被添加。
width 视窗（viewport）的宽度，包括纵向滚动条的宽度
device-aspect-ratio（Deprecated） 输出设备的宽高比 已在 Media Queries Level 4 中被弃用。
device-height（Deprecated） 输出设备渲染表面（如屏幕）的高度 已在 Media Queries Level 4 中被弃用。
device-width（Deprecated） 输出设备渲染表面（如屏幕）的宽度 已在 Media Queries Level 4 中被弃用。

逻辑操作符

逻辑操作符（logical operators） not, and, 和 only 可用于联合构造复杂的媒体查询，您还可以通过用逗号分隔多个媒体查询，将它们组合为一个规则。

  • and

and 操作符用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真，它还用于将媒体功能与媒体类型结合在一起。

  • not

not 运算符用于否定媒体查询，如果不满足这个条件则返回 true，否则返回 false。 如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。 如果使用 not 运算符，则还必须指定媒体类型。

注意：在Level 3中，not 关键字不能用于否定单个媒体功能表达式，而只能用于否定整个媒体查询。

  • only

only 运算符仅在整个查询匹配时才用于应用样式，并且对于防止较早的浏览器应用所选样式很有用。 当不使用 only 时，旧版本的浏览器会将 screen and (max-width: 500px) 简单地解释为 screen，忽略查询的其余部分，并将其样式应用于所有屏幕。 如果使用 only 运算符，则还必须指定媒体类型。

  • , (逗号)

逗号用于将多个媒体查询合并为一个规则。 逗号分隔列表中的每个查询都与其他查询分开处理。 因此，如果列表中的任何查询为 true，则整个 media 语句均返回 true。 换句话说，列表的行为类似于逻辑或 or 运算符。

媒体查询使用方式

  • 通过 @media 和 @import at-rules 用 CSS 装饰样式

示例：

1
2
3
4
5
6
7
8
@import url('landscape.css') screen and (orientation:landscape);

@media only screen and (device-width: 384px) and (device-height: 640px) and
(-webkit-device-pixel-ratio: 3) {
    .title {
        max-height: 0.26rem;
    }
}
  • 用 media= 属性为