@media

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

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

尝试一下

语法

@media at 规则可置于你代码的顶层或嵌套至其他任何的 at 条件规则组中。

css
/* 在你的代码的顶层 */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* 嵌套至其他的 at 条件规则中 */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

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

描述

媒体类型

媒体类型(media type)描述设备的一般类别。除非使用 notonly 逻辑运算符,否则媒体类型是可选的,并且会(隐式地)应用 all 类型。

all

适用于所有设备。

print

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

screen

主要用于屏幕。

备注: CSS2.1 和媒体查询第 3 版定义了一些额外的媒体类型(ttytvprojectionhandheldbrailleembossed 以及 aural),但是它们在媒体查询第 4 版中已被弃用,不应继续使用。

媒体特性

媒体特性(media feature)描述了用户代理、输出设备或环境的具体特征。媒体特性表达式是完全可选的,其用于测试这些特征是否存在以及它们的值。每个媒体特性表达式都必须用括号括起来。

any-hover

是否有任何可用的输入机制允许用户(将鼠标等)悬停在元素上?于媒体查询第 4 版中被添加。

any-pointer

可用的输入机制中是否有任何指针设备,如果有,它的精度如何?于媒体查询第 4 版中被添加。

aspect-ratio

视口(viewport)的宽高比。

color

输出设备每个颜色分量的比特值,如果设备不支持输出彩色,则该值为 0。

color-gamut

用户代理和输出设备大致程度上支持的色域。于媒体查询第 4 版中被添加。

color-index

输出设备的颜色查询表(color lookup table)中的条目数量,如果设备不使用颜色查询表,则该值为 0。

device-aspect-ratio 已弃用

输出设备的宽高比。于媒体查询第 4 版中被弃用。

device-height 已弃用

输出设备渲染表面的高度。于媒体查询第 4 版中被弃用。

device-width 已弃用

输出设备渲染表面的宽度。于媒体查询第 4 版中被弃用。

display-mode

应用程序的显示模式,显示模式由 web 应用的清单(manifest)中的 display 成员所指定。定义于 Web App Manifest 规范

dynamic-range

用户代理和输出设备支持的亮度、对比度和色彩深度的组合。于媒体查询第 5 版中被添加。

forced-colors

检测用户代理是否限制调色板。于媒体查询第 5 版中被添加。

grid

输出设备使用网格屏幕还是点阵屏幕?

height

视口的高度。

hover

主输入机制是否允许用户在元素上悬停。于媒体查询第 4 版中被添加。

inverted-colors

用户代理或者底层操作系统是否反转了颜色。于媒体查询第 5 版中被添加。

monochrome

输出设备单色帧缓冲区中每个像素的位深度。如果设备并非单色屏幕,则该值为 0。

orientation

视口的旋转方向。

overflow-block

输出设备如何处理沿块轴溢出视口的内容。于媒体查询第 4 版中被添加。

overflow-inline

沿行轴溢出视口的内容是否可以滚动。于媒体查询第 4 版中被添加。

pointer

主输入机制是一个指针设备吗?如果是,它的精度如何?于媒体查询第 4 版中被添加。

prefers-color-scheme

检测用户倾向于选择亮色还是暗色的配色方案。于媒体查询第 5 版中被添加。

prefers-contrast

检测用户是否有向系统要求提高或降低相近颜色之间的对比度。于媒体查询第 5 版中被添加。

prefers-reduced-motion

用户是否希望页面上出现更少的动态效果。于媒体查询第 5 版中被添加。

resolution

输出设备的像素密度(分辨率)。

scripting

检测脚本(例如 JavaScript)是否可用。于媒体查询第 5 版中被添加。

update 实验性

输出设备修改渲染内容的频率。于媒体查询第 4 版中被添加。

video-dynamic-range

用户代理的视频平面(video plane)和输出设备支持的亮度、对比度及色彩深度的组合。于媒体查询第 5 版中被添加。

width

视口(包括纵向滚动条)的宽度。

逻辑运算符

逻辑运算符(logical operator)notandonlyor 可用于联合构造复杂的媒体查询,你还可以通过用逗号分隔多个媒体查询,将它们组合为一个规则。

and

用于将多个媒体查询规则组合成单条媒体查询,当每个查询规则都为真时则该条媒体查询为 true,它还用于将媒体特性与媒体类型结合在一起。

not

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

备注: 在第 3 版中,not 关键字不能用于否定单个媒体特性表达式,而只能用于否定整个媒体查询。

only

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

,(逗号)

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

or

等价于 , 运算符。于媒体查询第 4 版中被添加。

用户代理客户端提示

一些媒体查询有相应的用户代理客户端提示。这是请求特定媒体要求的预优化内容的 HTTP 标头,其包括 Sec-CH-Prefers-Color-SchemeSec-CH-Prefers-Reduced-Motion

无障碍考虑

为了最好地适应调整了网站文本大小的用户,当你需要在媒体查询中使用 <length> 时,请使用 em 单位。

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

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

安全

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

由于存在这种潜在的安全问题,浏览器可能会选择以某种方式伪造返回的值,以防止它们被用于精确地标识计算机。浏览器可能还会在这方面提供额外措施。例如,如果启用了 Firefox 的“拦截指纹跟踪”设置,则许多媒体查询会报告默认值,而不是代表实际设备状态的值。

形式语法

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

示例

测试 print 和 screen 媒体类型

css
@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 版引入了一种新的范围语法,在测试接受范围的任何特性时允许更简洁的媒体查询,如下面的示例所示:

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

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

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

规范

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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
@media
-moz-device-pixel-ratio media feature
DeprecatedNon-standard
-webkit-animation media feature
DeprecatedNon-standard
-webkit-device-pixel-ratio media feature
-webkit-max-device-pixel-ratio media feature
-webkit-min-device-pixel-ratio media feature
-webkit-transform-2d media feature
Non-standard
-webkit-transform-3d media feature
-webkit-transition media feature
DeprecatedNon-standard
any-hover media feature
any-pointer media feature
aspect-ratio media feature
calc() expressions
color media feature
color-gamut media feature
color-index media feature
device-aspect-ratio media feature
Deprecated
device-height media feature
Deprecated
device-posture media feature
Experimental
device-width media feature
Deprecated
display-mode media feature
picture-in-picture value
Experimental
dynamic-range media feature
forced-colors media feature
grid media feature
height media feature
hover media feature
inverted-colors media feature
Media feature expressions
Media query value support
monochrome media feature
Nested media queries
or syntax from Media Queries Level 4
orientation media feature
overflow-block media feature
overflow-inline media feature
pointer media feature
prefers-color-scheme media feature
no-preference value
DeprecatedNon-standard
Respects color-scheme inherited from parent
Non-standard
prefers-contrast media feature
prefers-reduced-data media feature
Experimental
prefers-reduced-motion media feature
prefers-reduced-transparency media feature
Experimental
Range syntax from Media Queries Level 4
resolution media feature
scripting media feature
update media feature
video-dynamic-range media feature
width media feature

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.
User must explicitly enable this feature.
Has more compatibility info.

参见