@media
Baseline 广泛可用 *
@media 这个 CSS @ 规则可用于根据一个或多个媒体查询的结果来应用样式表的一部分。通过它，你可以指定一个媒体查询和一个 CSS 块，当且仅当该媒体查询与正在使用内容的设备匹配时，该 CSS 块才会应用于该文档。
备注： 在 JavaScript 中，可以使用 CSSMediaRule CSS 对象模型接口访问使用 @media 创建的规则。
试一试
abbr {
color: #860304;
font-weight: bold;
transition: color 0.5s ease;
}
@media (hover: hover) {
abbr:hover {
color: #001ca8;
transition-duration: 0.5s;
}
}
@media not all and (hover: hover) {
abbr::after {
content: " (" attr(title) ")";
}
}
<p>
<abbr title="National Aeronautics and Space Administration">NASA</abbr> is a
U.S. government agency that is responsible for science and technology related
to air and space.
</p>
语法
/* At the top level of your code */
@media screen and (width >= 900px) {
article {
padding: 1rem 3rem;
}
}
/* Nested within another conditional at-rule */
@supports (display: flex) {
@media screen and (width >= 900px) {
article {
display: flex;
}
}
}
@media @ 规则可以放在代码的顶层，也可以嵌套在任何其他条件组 @ 规则中。
关于媒体查询语法的讨论，请参阅使用媒体查询。
描述
媒体查询的 <media-query-list> 包括<media-type>（媒体类型）、<media-feature>（媒体特性）和逻辑操作符。
媒体类型
<media-type> 描述设备的一般类别。除非使用 only 逻辑操作符，否则媒体类型是可选的，并会隐含 all 类型。
媒体特性
<media feature> 描述了用户代理、输出设备或环境的特定特征。媒体特性表达式测试它们的存在性、值或值的范围，并且是完全可选的。每个媒体特性表达式都必须用括号括起来。
any-hover-
是否有任何可用的输入机制允许用户悬停在元素上？
any-pointer-
是否有任何可用的输入机制是指针设备，如果是，它的精确度如何？
aspect-ratio-
视口的宽高纵横比。
color-
输出设备每个颜色分量的位数，如果设备不是彩色的，则为零。
color-gamut-
用户代理和输出设备支持的近似颜色范围。
color-index-
输出设备颜色查找表中的条目数，如果设备不使用此类表，则为零。
device-aspect-ratio-
输出设备的宽高纵横比。在媒体查询第 4 级中已弃用。
device-height-
输出设备渲染表面的高度。在媒体查询第 4 级中已弃用。
device-posture-
检测设备的当前姿势，即视口处于展开还是折叠状态。在设备姿势 API 中定义。
device-width-
输出设备渲染表面的宽度。在媒体查询第 4 级中已弃用。
display-mode-
应用程序的显示模式：例如，fullscreen（全屏）或 picture-in-picture（画中画）模式。在媒体查询第 5 级中添加。
dynamic-range-
用户代理和输出设备支持的亮度、对比度和颜色深度的组合。在媒体查询第 5 级中添加。
forced-colors-
检测用户代理是否限制了调色板。在媒体查询第 5 级中添加。
grid-
设备是使用网格屏幕还是位图屏幕？
height-
视口的高度。
horizontal-viewport-segments-
检测设备是否具有指定数量的水平排列的视口段。
hover-
主要输入机制是否允许用户悬停在元素上？
inverted-colors-
用户代理或底层操作系统是否反转颜色？在媒体查询第 5 级中添加。
monochrome-
输出设备单色帧缓冲区中每像素的位数，如果设备不是单色的，则为零。
orientation-
视口的方向。
overflow-block-
输出设备如何处理沿块轴溢出视口的内容？
overflow-inline-
沿行内轴溢出视口的内容是否可以滚动？
pointer-
主要输入机制是否为指针设备，如果是，它的精确度如何？
prefers-color-scheme-
检测用户是否偏好浅色或深色方案。在媒体查询第 5 级中添加。
prefers-contrast-
检测用户是否已请求系统增加或减少相邻颜色之间的对比度。在媒体查询第 5 级中添加。
prefers-reduced-data-
检测用户是否已请求消耗较少互联网流量的 Web 内容。
prefers-reduced-motion-
用户偏好页面上较少的动态效果。在媒体查询第 5 级中添加。
prefers-reduced-transparency-
检测用户是否在其设备上启用了减少透明或半透明图层效果的设置。
resolution-
输出设备的像素密度。
scan-
显示输出是逐行扫描还是隔行扫描。
scripting-
检测脚本（即 JavaScript）是否可用。在媒体查询第 5 级中添加。
shape-
检测设备的形状以区分矩形和圆形显示器。
update-
输出设备可以修改内容外观的频率。
vertical-viewport-segments-
检测设备是否具有指定数量的垂直排列的视口段。在媒体查询第 5 级中添加。
video-dynamic-range-
用户代理的视频平面和输出设备支持的亮度、对比度和颜色深度的组合。在媒体查询第 5 级中添加。
width-
视口的宽度，包括滚动条的宽度。
-moz-device-pixel-ratio-
每个 CSS 像素对应的设备像素数。请改用带有
dppx单位的resolution特性。 -webkit-animation-
浏览器支持带
-webkit前缀的 CSSanimation。请改用@supports (animation)特性查询。 -webkit-device-pixel-ratio-
每个 CSS 像素对应的设备像素数。请改用带有
dppx单位的resolution特性。 -webkit-transform-2d-
浏览器支持带
-webkit前缀的 2D CSStransform。请改用@supports (transform)特性查询。 -webkit-transform-3d-
浏览器支持带
-webkit前缀的 3D CSStransform。请改用@supports (transform)特性查询。 -webkit-transition-
浏览器支持带
-webkit前缀的 CSStransition。请改用@supports (transition)特性查询。
逻辑操作符
逻辑操作符 not、and、only 和 or 可用于构成复杂的媒体查询。你还可以通过用逗号分隔多个媒体查询，将它们组合成一个规则。
and-
用于将多个媒体特性组合成一个媒体查询，要求每个链接的特性都返回
true，查询才为true。它也用于将媒体特性与媒体类型连接起来。 not-
用于否定一个媒体查询，如果查询原本返回
false，则返回true。如果出现在逗号分隔的查询列表中，它将只否定其应用到的特定查询。备注： 在第 3 级规范中，
not关键字不能用于否定单个媒体特性表达式，只能否定整个媒体查询。 only-
仅在整个查询匹配时才应用样式。它有助于防止旧版浏览器应用选定的样式。不使用
only时，旧版浏览器会将查询screen and (width <= 500px)解释为screen，忽略查询的其余部分，并将其样式应用于所有屏幕。如果使用only操作符，你还必须指定媒体类型。 ,（逗号）-
逗号用于将多个媒体查询组合成一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此，如果列表中的任何一个查询为
true，则整个媒体语句返回true。换句话说，列表的行为类似于逻辑or操作符。 or-
等同于
,操作符。在媒体查询第 4 级中添加。
用户代理客户端提示
一些媒体查询有对应的用户代理客户端提示。这些是 HTTP 标头，用于请求为特定媒体需求预先优化的内容。它们包括 Sec-CH-Prefers-Color-Scheme 和 Sec-CH-Prefers-Reduced-Motion。
正式语法
@media =
@media <media-query-list> { <rule-list> }
无障碍
为了最好地适应调整网站文本大小的用户，当需要为媒体查询指定<length>时，请使用em。
em 和 px 都是有效单位，但如果用户更改浏览器文本大小，em 的效果更好。
还可以考虑使用媒体查询或HTTP 用户代理客户端提示来改善用户体验。例如，媒体查询 prefers-reduced-motion 或等效的 HTTP 标头 Sec-CH-Prefers-Reduced-Motion 可用于根据用户偏好最小化动画或动态效果的使用。
安全
由于媒体查询提供了有关用户正在使用的设备的能力——以及由此引申的设备特性和设计——的见解，因此它们有可能被滥用以构建“指纹”来识别设备，或至少在某种程度上对设备进行分类，这可能是用户不希望的。
由于这种可能性，浏览器可能会选择以某种方式模糊返回的值，以防止它们被用于精确识别计算机。浏览器也可能在这方面提供额外的措施；例如，如果启用了 Firefox 的“抵抗指纹识别”设置，许多媒体查询会报告默认值，而不是代表实际设备状态的值。
示例
测试 print 和 screen 媒体类型
@media print {
body {
font-size: 10pt;
}
}
@media screen {
body {
font-size: 13px;
}
}
@media screen, print {
body {
line-height: 1.2;
}
}
范围语法允许在测试任何接受范围的特性时使用更简洁的媒体查询，如下例所示
@media (height > 600px) {
body {
line-height: 1.4;
}
}
@media (400px <= width <= 700px) {
body {
line-height: 1.4;
}
}
更多示例，请参阅使用媒体查询。
规范
| 规范 |
|---|
| 媒体查询第 4 级 # media-descriptor-table |
| CSS 条件规则模块第 3 级 # at-media |
浏览器兼容性
加载中…