@media

@media CSS @规则 可用于基于一个或多个 媒体查询的结果来应用样式表的一部分。使用它,您可以指定一个媒体查询和一个 CSS 块,当且仅当该媒体查询与正在使用其内容的设备匹配时,该 CSS 块才能应用于该文档。

备注: 在 JavaScript 中,可以使用CSSMediaRuleCSS 对象模型接口访问使用 @media 创建的规则。

语法

@media 规则可置于您代码的顶层或位于其它任何@条件规则组内。

/* At the top level of your code */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* Nested within another conditional at-rule */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

有关媒体查询语法的讨论,请参阅使用媒体查询

正式语法

@media = 
@media <media-query-list> { <stylesheet> }

媒体特性

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

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

示例

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

@media screen {
  body { font-size: 13px; }
}

@media screen, print {
  body { line-height: 1.2; }
}

@media only screen
  and (min-width: 320px)
  and (max-width: 480px)
  and (resolution: 150dpi) {
    body { line-height: 1.4; }
}

媒体查询第 4 级引入了一种新的范围语法,在测试接受范围的任何特性时允许更简洁的媒体查询,如下面的示例所示:

@media (height > 600px) {
    body { line-height: 1.4; }
}

@media (400px <= width <= 700px) {
    body { line-height: 1.4; }
}

更多示例,请查看使用媒体查询

无障碍

为了最好地调整网站文本大小,当您需要<length> 进行媒体查询时,请使用em

empx都是有效单位,但如果用户更改浏览器文本大小,em的效果会更好。

考虑使用 4 级媒体查询来改善用户体验。例如,使用prefers-reduced-motion检测用户是否已请求系统最小化其使用的动画或动作量。

安全

由于媒体查询可以洞察用户正在使用的设备的功能(以及扩展的功能和设计),因此有可能滥用它们来构造“指纹”来识别设备,或者至少 将其分类为某些细节,这可能是用户不希望看到的。

由于存在这种潜力,浏览器可能会选择以某种方式捏造返回的值,以防止它们被用来精确地标识计算机。浏览器可能还会在此区域提供其他措施。例如,如果启用了 Firefox 的“抵抗指纹”设置,则许多媒体查询会报告默认值,而不是代表实际设备状态的值。

规范

Specification
Media Queries Level 4
# media-descriptor-table
CSS Conditional Rules Module Level 3
# at-media

浏览器兼容性

BCD tables only load in the browser

更多资料