@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-query-list> {
  <group-rule-body>
}

where
<media-query-list> = <media-query>#

where
<media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?

where
<media-condition> = <media-not> | <media-and> | <media-or> | <media-in-parens>
<media-type> = <ident>
<media-condition-without-or> = <media-not> | <media-and> | <media-in-parens>

where
<media-not> = not <media-in-parens>
<media-and> = <media-in-parens> [ and <media-in-parens> ]+
<media-or> = <media-in-parens> [ or <media-in-parens> ]+
<media-in-parens> = ( <media-condition> ) | <media-feature> | <general-enclosed>

where
<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )

where
<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> [ '<' | '>' ]? '='? <mf-value> | <mf-value> [ '<' | '>' ]? '='? <mf-name> | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value> | <mf-value> '>' '='? <mf-name> '>' '='? <mf-value>

where
<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>

媒体特性

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

名称 简介 备注
any-hover 是否有任何可用的输入机制允许用户(将鼠标等)悬停在元素上? 在 Media Queries Level 4 中被添加。
any-pointer 可用的输入机制中是否有任何指针设备,如果有,它的精度如何? 在 Media Queries Level 4 中被添加。
aspect-ratio 视窗(viewport)的宽高比
color 输出设备每个像素的比特值,常见的有 8、16、32 位。如果设备不支持输出彩色,则该值为 0
color-gamut 用户代理和输出设备大致程度上支持的色域 在 Media Queries Level 4 中被添加。
color-index 输出设备的颜色查询表(color lookup table)中的条目数量,如果设备不使用颜色查询表,则该值为 0
device-aspect-ratio 输出设备的宽高比 已在 Media Queries Level 4 中被弃用。
device-height 输出设备渲染表面(如屏幕)的高度 已在 Media Queries Level 4 中被弃用。
device-width 输出设备渲染表面(如屏幕)的宽度 已在 Media Queries Level 4 中被弃用。
display-mode

应用程序的显示模式,如web app的manifest中的display 成员所指定

在 Web App Manifest spec被定义.
forced-colors 检测是user agent否限制调色板 在 Media Queries Level 5 中被添加。
grid 输出设备使用网格屏幕还是点阵屏幕?
height 视窗(viewport)的高度
hover

主要输入模式是否允许用户在元素上悬停

在 Media Queries Level 4 中被添加。
inverted-colors user agent或者底层操作系统是否反转了颜色 在 Media Queries Level 5 中被添加。
light-level 环境光亮度 在 Media Queries Level 5 中被添加。
monochrome

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

orientation 视窗(viewport)的旋转方向
overflow-block

输出设备如何处理沿块轴溢出视窗(viewport)的内容

在 Media Queries Level 4 中被添加。
overflow-inline

沿内联轴溢出视窗(viewport)的内容是否可以滚动?

在 Media Queries Level 4 中被添加。
pointer

主要输入机制是一个指针设备吗?如果是,它的精度如何?

在 Media Queries Level 4 中被添加。
prefers-color-scheme 探测用户倾向于选择亮色还是暗色的配色方案 在 Media Queries Level 5 中被添加。
prefers-contrast 探测用户是否有向系统要求提高或降低相近颜色之间的对比度 在 Media Queries Level 5 中被添加。
prefers-reduced-motion 用户是否希望页面上出现更少的动态效果 在 Media Queries Level 5 中被添加。
prefers-reduced-transparency 用户是否倾向于选择更低的透明度 在 Media Queries Level 5 中被添加。
resolution 输出设备的像素密度(分辨率)
scan 输出设备的扫描过程(适用于电视等)
scripting 探测脚本(例如 JavaScript)是否可用 在 Media Queries Level 5 中被添加。
update 输出设备更新内容的渲染结果的频率 在 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 Comment Feedback
Media Queries Level 5
@media
Reinstates light-level, inverted-colors and Custom Media Queries, which were removed from Level 4.
Adds prefers-reduced-motion, prefers-reduced-transparency, prefers-contrast, and prefers-color-scheme media features.
CSS Working Group drafts GitHub issues
CSS Conditional Rules Module Level 3
@media
Defines the basic syntax of the @media rule. CSS Working Group drafts GitHub issues
Media Queries Level 4
@media

Adds scripting, pointer, hover, update, overflow-block, and overflow-inline media features.
Deprecates all media types except for screen, print, speech, and all.
Makes the syntax more flexible by adding, among other things, the or keyword.

CSS Working Group drafts GitHub issues
Media Queries
@media
CSS Level 2 (Revision 1)
@media
Initial definition.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
@mediaChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 6Opera Full support 9.2Safari Full support 1.3WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
any-hover media featureChrome Full support 41Edge Full support 16Firefox Full support 64IE No support NoOpera Full support 28Safari Full support 9WebView Android Full support 41Chrome Android Full support 41Firefox Android Full support 64Opera Android Full support 28Safari iOS Full support 9Samsung Internet Android Full support 5.0
any-pointer media featureChrome Full support 41Edge Full support 12Firefox Full support 64IE No support NoOpera Full support 28Safari Full support 9WebView Android Full support 41Chrome Android Full support 41Firefox Android Full support 64Opera Android Full support 28Safari iOS Full support 9Samsung Internet Android Full support 4.0
aspect-ratio media featureChrome Full support 3Edge Full support 12Firefox Full support 3.5IE Full support 9Opera Full support 10Safari Full support 5WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 4.2Samsung Internet Android Full support 1.0
calc() expressionsChrome Full support 66Edge Full support 79Firefox Full support 59IE No support NoOpera Full support 53Safari Full support 12WebView Android Full support 66Chrome Android Full support 66Firefox Android Full support 59Opera Android Full support 47Safari iOS Full support 12Samsung Internet Android Full support 9.0
color media featureChrome Full support 1Edge Full support 12Firefox Full support 2IE Full support 9Opera Full support 10Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
color-gamut media featureChrome Full support 58Edge Full support 79Firefox No support NoIE No support NoOpera Full support 45Safari Full support 10WebView Android Full support 58Chrome Android Full support 58Firefox Android No support NoOpera Android Full support 43Safari iOS Full support 10Samsung Internet Android Full support 7.0
color-index media featureChrome Full support 29Edge Full support 79Firefox No support NoIE No support NoOpera Full support 16Safari Full support 8WebView Android Full support ≤37Chrome Android Full support 29Firefox Android No support NoOpera Android Full support 16Safari iOS Full support 8Samsung Internet Android Full support 2.0
device-aspect-ratio media feature
DeprecatedNon-standard
Chrome Full support 1Edge Full support 12Firefox Full support 2IE Full support 9Opera Full support 10Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
device-height media feature
DeprecatedNon-standard
Chrome Full support 1Edge Full support 12Firefox Full support 2IE Full support 9Opera Full support 10Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
device-width media feature
DeprecatedNon-standard
Chrome Full support 1Edge Full support 12Firefox Full support 2IE Full support 9Opera Full support 10Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
display-mode media featureChrome Full support 45Edge Full support 79Firefox Full support 47
Notes
Full support 47
Notes
Notes Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.
IE No support NoOpera Full support 32Safari Full support 13WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 47
Notes
Full support 47
Notes
Notes Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.
Opera Android Full support 32Safari iOS Full support 13Samsung Internet Android Full support 5.0
forced-colors media feature
Experimental
Chrome No support No
Notes
No support No
Notes
Notes See bug 970285.
Edge No support No
Notes
No support No
Notes
Notes See bug 970285.
Firefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support No
Notes
No support No
Notes
Notes See bug 970285.
Chrome Android No support No
Notes
No support No
Notes
Notes See bug 970285.
Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
grid media featureChrome Full support 1Edge Full support 12Firefox Full support 2IE Full support 10Opera Full support 10Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
height media featureChrome Full support 1Edge Full support 12Firefox Full support 2IE Full support 9Opera Full support 10Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
hover media featureChrome Full support 38
Notes
Full support 38
Notes
Notes Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613.
Edge Full support 12Firefox Full support 64IE No support NoOpera Full support 28Safari Full support 9WebView Android Full support 38
Notes
Full support 38
Notes
Notes Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613.
Chrome Android Full support 50Firefox Android Full support 64Opera Android Full support 28Safari iOS Full support 9Samsung Internet Android Full support 5.0
inverted-colors media featureChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari Full support 9.1WebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS Full support 10Samsung Internet Android No support No
light-level media featureChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Media feature expressionsChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 9.2Safari Full support 1.3WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.1Samsung Internet Android Full support 1.0
Media query value supportChrome Full support 66Edge Full support 79Firefox Full support 59IE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Firefox Android Full support 59Opera Android Full support 47Safari iOS No support NoSamsung Internet Android Full support 9.0
monochrome media featureChrome Full support 1Edge Full support 79Firefox Full support 2IE No support NoOpera Full support 10Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
Nested media queriesChrome Full support 26Edge Full support 12Firefox Full support 11IE No support NoOpera Full support 12.1Safari Full support 6.1WebView Android Full support ≤37Chrome Android Full support 26Firefox Android Full support 14Opera Android Full support 12.1Safari iOS Full support 7Samsung Internet Android Full support 1.5
orientation media featureChrome Full support 3Edge Full support 12Firefox Full support 2IE Full support 9Opera Full support 10.6Safari Full support 5WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 11Safari iOS Full support 4.2Samsung Internet Android Full support 1.0
overflow-block media featureChrome No support NoEdge No support NoFirefox Full support 66IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 66Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
overflow-inline media featureChrome No support NoEdge No support NoFirefox Full support 66IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 66Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
pointer media featureChrome Full support 41Edge Full support 12Firefox Full support 64IE No support NoOpera Full support 28Safari Full support 9WebView Android Full support 41Chrome Android Full support 50Firefox Android Full support 64Opera Android Full support 28Safari iOS Full support 9Samsung Internet Android Full support 5.0
prefers-color-scheme media featureChrome Full support 76Edge Full support 79Firefox Full support 67IE No support NoOpera Full support 62Safari Full support 12.1WebView Android Full support 76Chrome Android Full support 76Firefox Android No support NoOpera Android Full support 54Safari iOS Full support 13Samsung Internet Android No support No
prefers-contrast media feature
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
prefers-reduced-data media feature
Experimental
Chrome No support No
Notes
No support No
Notes
Notes See bug 1051189.
Edge No support No
Notes
No support No
Notes
Notes See bug 1051189.
Firefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support No
Notes
No support No
Notes
Notes See bug 1051189.
Chrome Android No support No
Notes
No support No
Notes
Notes See bug 1051189.
Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
prefers-reduced-motion media featureChrome Full support 74Edge Full support 79Firefox Full support 63IE No support NoOpera Full support 62Safari Full support 10.1WebView Android Full support 74Chrome Android Full support 74Firefox Android Full support 64Opera Android Full support 53Safari iOS Full support 10.3Samsung Internet Android No support No
prefers-reduced-transparency media feature
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
resolution media featureChrome Full support 29Edge Full support 12Firefox Full support 8
Full support 8
Partial support 3.5
Notes
Notes Supports <integer> values only.
IE Full support 9Opera Full support 16
Full support 16
No support 10 — 15
Safari No support No
Notes
No support No
Notes
Notes See bug 78087.
WebView Android Full support ≤37Chrome Android Full support 29Firefox Android Full support 8
Full support 8
Partial support 4
Notes
Notes Supports <integer> values only.
Opera Android Full support 16
Full support 16
No support 10.1 — 14
Safari iOS No support No
Notes
No support No
Notes
Notes See bug 78087.
Samsung Internet Android Full support 2.0
scan media featureChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
scripting media featureChrome No support No
Notes
No support No
Notes
Notes See bug 489957.
Edge No support No
Notes
No support No
Notes
Notes See bug 489957.
Firefox No support No
Notes
No support No
Notes
Notes See bug 1166581.
IE No support NoOpera No support NoSafari No support NoWebView Android No support No
Notes
No support No
Notes
Notes See bug 489957.
Chrome Android No support No
Notes
No support No
Notes
Notes See bug 489957.
Firefox Android No support No
Notes
No support No
Notes
Notes See bug 1166581.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Notes
No support No
Notes
Notes See bug 489957.
speech media typeChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera Full support 9.2Safari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android Full support 10.1Safari iOS No support NoSamsung Internet Android No support No
update media featureChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
width media featureChrome Full support 1Edge Full support 12Firefox Full support 2IE Full support 9Opera Full support 10Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
-moz-device-pixel-ratio media feature
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox Full support 4IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 4Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
-webkit-animation media feature
DeprecatedNon-standard
Chrome No support 2 — 36Edge No support NoFirefox No support NoIE No support NoOpera No support 15 — 23Safari Full support 4WebView Android No support ≤37 — ≤37Chrome Android No support 18 — 36Firefox Android No support NoOpera Android No support 14 — 24Safari iOS Full support 3.2Samsung Internet Android No support 1.0 — 3.0
-webkit-device-pixel-ratio media feature
Non-standard
Chrome Full support 1Edge Full support 12Firefox Full support 63
Notes
Full support 63
Notes
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Full support 49
Notes Disabled
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Disabled From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 45
Notes Disabled
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Disabled From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 15Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 63
Notes
Full support 63
Notes
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Full support 49
Notes Disabled
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Disabled From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 45
Notes Disabled
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Disabled From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
-webkit-max-device-pixel-ratio media feature
Non-standard
Chrome Full support 1Edge Full support 12Firefox Full support 63
Notes
Full support 63
Notes
Notes Implemented as an alias for for max--moz-device-pixel-ratio.
Full support 49
Notes Disabled
Notes Implemented as an alias for for max--moz-device-pixel-ratio.
Disabled From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 45
Notes Disabled
Notes Implemented as an alias for for max--moz-device-pixel-ratio.
Disabled From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 15Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 63
Notes
Full support 63
Notes
Notes Implemented as an alias for for max--moz-device-pixel-ratio.
Full support 49
Notes Disabled
Notes Implemented as an alias for for max--moz-device-pixel-ratio.
Disabled From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 45
Notes Disabled
Notes Implemented as an alias for for max--moz-device-pixel-ratio.
Disabled From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
-webkit-min-device-pixel-ratio media feature
Non-standard
Chrome Full support 1Edge Full support 12Firefox Full support 63
Notes
Full support 63
Notes
Notes Implemented as an alias for for min--moz-device-pixel-ratio.
Full support 49
Notes Disabled
Notes Implemented as an alias for for min--moz-device-pixel-ratio.
Disabled From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 45
Notes Disabled
Notes Implemented as an alias for for min--moz-device-pixel-ratio.
Disabled From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 15Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 63
Notes
Full support 63
Notes
Notes Implemented as an alias for for min--moz-device-pixel-ratio.
Full support 49
Notes Disabled
Notes Implemented as an alias for for min--moz-device-pixel-ratio.
Disabled From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 45
Notes Disabled
Notes Implemented as an alias for for min--moz-device-pixel-ratio.
Disabled From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
-webkit-transform-2d media feature
Non-standard
Chrome No support 2 — 36Edge No support NoFirefox No support NoIE No support NoOpera No support 15 — 23Safari Full support 4WebView Android No support ≤37 — ≤37Chrome Android No support 18 — 36Firefox Android No support NoOpera Android No support 14 — 24Safari iOS Full support 3.2Samsung Internet Android No support 1.0 — 3.0
-webkit-transform-3d media feature
Non-standard
Chrome No support 2 — 36Edge No support 12 — 79Firefox Full support 49
Full support 49
Full support 46
Disabled
Disabled From version 46: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support 15 — 23Safari Full support 4WebView Android No support ≤37 — ≤37Chrome Android No support 18 — 36Firefox Android Full support 49
Full support 49
Full support 46
Disabled
Disabled From version 46: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support 14 — 24Safari iOS Full support 3.2Samsung Internet Android No support 1.0 — 3.0
-webkit-transition media feature
DeprecatedNon-standard
Chrome No support 2 — 36Edge No support NoFirefox No support NoIE No support NoOpera No support 15 — 23Safari Full support 4WebView Android No support ≤37 — ≤37Chrome Android No support 18 — 36Firefox Android No support NoOpera Android No support 14 — 24Safari iOS Full support 3.2Samsung Internet Android No support 1.0 — 3.0

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

更多资料