@media

@media at-rule 可以放置在代码的顶层，也可以嵌套在任何其他条件组 at-rule 内部。

/* 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;
    }
  }
}

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

媒体类型 描述了设备的通用类别。 除非使用 only 逻辑运算符，否则媒体类型是可选的，隐式使用 all 类型。

all

适用于所有设备。

print

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

screen

主要用于屏幕。

媒体特征 描述了 用户代理、输出设备或环境的特定特征。 媒体特征表达式测试它们的存在或值，并且是完全可选的。 每个媒体特征表达式必须用括号括起来。

any-hover

任何可用的输入机制是否允许用户将鼠标悬停在元素上？ 添加到媒体查询级别 4。

any-pointer

任何可用的输入机制是否是指向设备，如果是，其准确度如何？ 添加到媒体查询级别 4。

aspect-ratio

视窗的宽高 纵横比

color

输出设备的每个颜色分量的位数，如果设备不是彩色，则为零

color-gamut

用户代理和输出设备支持的颜色范围的近似值。 添加到媒体查询级别 4。

color-index

输出设备的颜色查找表中的条目数，如果设备不使用此类表，则为零

device-aspect-ratio

输出设备的宽高比例。在媒体查询级别 4 中已弃用。

device-height

输出设备渲染表面的高度。在媒体查询级别 4 中已弃用。

device-width

输出设备渲染表面的宽度。在媒体查询级别 4 中已弃用。

display-mode

应用程序显示的模式：例如，全屏 或 画中画 模式。在媒体查询级别 5 中添加。

dynamic-range

用户代理和输出设备支持的亮度、对比度和色深组合。在媒体查询级别 5 中添加。

forced-colors

检测用户代理是否限制调色板。在媒体查询级别 5 中添加。

grid

设备使用的是网格屏幕还是位图屏幕？

height

视窗的高度。

hover

主要输入机制是否允许用户将鼠标悬停在元素上？在媒体查询级别 4 中添加。

inverted-colors

用户代理或底层操作系统是否反转颜色？在媒体查询级别 5 中添加。

monochrome

输出设备单色帧缓冲区中的每像素位数，如果设备不是单色，则为零。

orientation

视窗的方向。

overflow-block

输出设备如何处理超出视窗沿块轴的内容？在媒体查询级别 4 中添加。

overflow-inline

超出视窗沿内联轴的内容是否可以滚动？在媒体查询级别 4 中添加。

pointer

主要输入机制是否是指向设备，如果是，其准确性如何？在媒体查询级别 4 中添加。

prefers-color-scheme

检测用户是否更喜欢浅色或深色配色方案。在媒体查询级别 5 中添加。

prefers-contrast

检测用户是否已请求系统增加或减少相邻颜色之间的对比度。在媒体查询级别 5 中添加。

prefers-reduced-data 实验性

检测用户是否已请求消耗更少互联网流量的网页内容。

prefers-reduced-motion

用户更喜欢页面上较少的运动。在媒体查询级别 5 中添加。

prefers-reduced-transparency 实验性

检测用户是否已在设备上启用设置以减少设备上使用的透明或半透明层效果。

resolution

输出设备的像素密度。

scan

显示输出是逐行扫描还是隔行扫描。

scripting

检测脚本（即 JavaScript）是否可用。在媒体查询级别 5 中添加。

shape 实验性

检测设备的形状以区分矩形和圆形显示器。

update

输出设备可以更改内容外观的频率。在媒体查询级别 4 中添加。

video-dynamic-range

用户代理和输出设备的视频平面支持的亮度、对比度和色深组合。在媒体查询级别 5 中添加。

width

视窗的宽度，包括滚动条的宽度。

逻辑运算符not、and、only 和 or 可用于组合复杂的媒体查询。您还可以通过用逗号分隔它们将多个媒体查询组合到单个规则中。

and

用于将多个媒体功能组合成单个媒体查询，要求每个链接的功能都返回true，查询才能返回true。它也用于将媒体功能与媒体类型连接。

not

用于否定媒体查询，如果查询本来会返回false，则返回true。如果存在于逗号分隔的查询列表中，它只会否定它应用到的特定查询。

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

only

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

,（逗号）

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

or

等效于, 运算符。在媒体查询级别 4 中添加。

某些媒体查询具有相应的 用户代理客户端提示。这些是 HTTP 标头，请求针对特定媒体要求预先优化的内容。它们包括 Sec-CH-Prefers-Color-Scheme 和 Sec-CH-Prefers-Reduced-Motion。

为了最好地适应调整网站文本大小的人员，当您需要em 用于<length> 的媒体查询时，请使用它们。

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

还要考虑媒体查询或HTTP 用户代理客户端提示 以改善用户体验。例如，媒体查询 prefers-reduced-motion 或等效的 HTTP 标头 Sec-CH-Prefers-Reduced-Motion）可用于根据用户偏好最大限度地减少使用的动画或运动量。

由于媒体查询提供了对用户使用设备的功能（以及由此产生的功能和设计）的洞察，因此它们有可能被滥用来构建 “指纹”，以识别设备，或至少将其分类到用户可能不希望的某种程度的细节。

由于存在这种可能性，浏览器可能会选择以某种方式伪造返回的值，以防止它们被用来精确地识别计算机。浏览器也可能在该领域提供其他措施；例如，如果启用 Firefox 的“抵制指纹”设置，许多媒体查询会报告默认值，而不是表示实际设备状态的值。

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

@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;
  }
}

有关更多示例，请参阅 使用媒体查询。

• CSS 媒体查询 模块
• Using media queries
• 在 JavaScript 中，@media 可以通过 CSS 对象模型接口 CSSMediaRule 访问。
• 扩展的 Mozilla 媒体功能
• 扩展的 WebKit 媒体功能