@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。

em和px都是有效单位，但如果用户更改浏览器文本大小，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