就业培训     下载中心     Wiki     联络
登录   注册
  1. 首页
  2. CSS
  3. @media

在此页

@media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries . With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.

注意： In JavaScript, the rules created using @media can be accessed with the CSSMediaRule CSS object model interface.

句法

@media at-rule may be placed at the top level of your code or nested inside any other conditional group 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;
    }
  }
}

For a discussion of media query syntax, please see Using media queries .

描述

Media types

Media types describe the general category of a device. Except when using the not or only logical operators, the media type is optional and the all type will be implied.

all

Suitable for all devices.

print
Intended for paged material and documents viewed on a screen in print preview mode. (Please see paged media for information about formatting issues that are specific to these formats.)
screen

Intended primarily for screens.

speech

Intended for speech synthesizers.

Deprecated media types: CSS2.1 and Media Queries 3 defined several additional media types ( tty , tv , projection , handheld , braille , embossed ，和 aural ), but they were deprecated in Media Queries 4 and shouldn't be used. The aural type has been replaced by speech , which is similar.

Media features

Media features describe specific characteristics of the 用户代理 , output device, or environment. Media feature expressions test for their presence or value, and are entirely optional. Each media feature expression must be surrounded by parentheses.

Name 摘要 注意事项
any-hover Does any available input mechanism allow the user to hover over elements? Added in Media Queries Level 4.
any-pointer Is any available input mechanism a pointing device, and if so, how accurate is it? Added in Media Queries Level 4.
aspect-ratio Width-to-height aspect ratio of the viewport
color Number of bits per color component of the output device, or zero if the device isn't color
color-gamut Approximate range of colors that are supported by the user agent and output device Added in Media Queries Level 4.
color-index Number of entries in the output device's color lookup table, or zero if the device does not use such a table
device-aspect-ratio Width-to-height aspect ratio of the output device Deprecated in Media Queries Level 4.
device-height Height of the rendering surface of the output device Deprecated in Media Queries Level 4.
device-width Width of the rendering surface of the output device Deprecated in Media Queries Level 4.
display-mode The display mode of the application, as specified in the web app manifest's display member Defined in the Web App Manifest spec .
forced-colors Detect whether user agent restricts color palette Added in Media Queries Level 5.
grid Does the device use a grid or bitmap screen?
height Height of the viewport
hover Does the primary input mechanism allow the user to hover over elements? Added in Media Queries Level 4.
inverted-colors Is the user agent or underlying OS inverting colors? Added in Media Queries Level 5.
monochrome Bits per pixel in the output device's monochrome frame buffer, or zero if the device isn't monochrome
orientation Orientation of the viewport
overflow-block How does the output device handle content that overflows the viewport along the block axis? Added in Media Queries Level 4.
overflow-inline Can content that overflows the viewport along the inline axis be scrolled? Added in Media Queries Level 4.
pointer Is the primary input mechanism a pointing device, and if so, how accurate is it? Added in Media Queries Level 4.
prefers-color-scheme Detect if the user prefers a light or dark color scheme Added in Media Queries Level 5.
prefers-contrast Detects if the user has requested the system increase or decrease the amount of contrast between adjacent colors Added in Media Queries Level 5.
prefers-reduced-motion The user prefers less motion on the page Added in Media Queries Level 5.
prefers-reduced-transparency The user prefers reduced transparency Added in Media Queries Level 5.
resolution Pixel density of the output device
scan Scanning process of the output device
scripting Detects whether scripting (i.e. JavaScript) is available Added in Media Queries Level 5.
update How frequently the output device can modify the appearance of content Added in Media Queries Level 4.
width Width of the viewport including width of scrollbar

可访问性关注

To best accommodate people who adjust a site's text size, use em s when you need a <length> for your media queries .

Both em and px are valid units, but em works better if the user changes the browser text size.

Also consider using Level 4 media queries to improve the user's experience. For example, prefers-reduced-motion to detect if the user has requested that the system minimize the amount of animation or motion it uses.

安全性

Because media queries provide insights into the capabilities—and by extension, the features and design—of the device the user is working with, there is the potential that they could be abused to construct a "fingerprint" which identifies the device, or at least categorizes it to some degree of detail that may be undesirable to users.

Because of this potential, a browser may opt to fudge the returned values in some manner in order to prevent them from being used to precisely identify a computer. A browser might also offer additional measures in this area; for example, if Firefox's "Resist Fingerprinting" setting is enabled, many media queries report default values rather than values representing the actual device state.

形式句法 

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

范例

Testing for print and screen media types 

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

Introduced in Media Queries Level 4 is a new range syntax that allows for less verbose media queries when testing for any feature accepting a range, as shown in the below examples: 

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

For more examples, please see Using media queries .

规范

规范 注释 Feedback
Media Queries Level 5
The definition of '@media descriptors' in that specification. 		Reinstates inverted-colors and Custom Media Queries, which were removed from Level 4.
添加 prefers-reduced-motion , prefers-reduced-transparency , prefers-contrast ，和 prefers-color-scheme media features. 		CSS Working Group drafts GitHub issues
CSS Conditional Rules Module Level 3
The definition of '@media' in that specification. 		Defines the basic syntax of the @media rule. CSS Working Group drafts GitHub issues
Media Queries Level 4
The definition of '@media' in that specification. 		添加 scripting , pointer , hover , update , overflow-block ，和 overflow-inline media features.
Deprecates all media types except for screen , print , speech ，和 all .
Makes the syntax more flexible by adding, among other things, the or 关键词。 		CSS Working Group drafts GitHub issues
Media Queries
The definition of '@media' in that specification.
CSS Level 2 (Revision 1)
The definition of '@media' in that specification. 		初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
@media Chrome 完整支持 1 Edge 完整支持 12 Firefox 完整支持 1 IE 完整支持 6 Opera 完整支持 9.2 Safari 完整支持 1.3 WebView Android 完整支持 1 Chrome Android 完整支持 18 Firefox Android 完整支持 4 Opera Android 完整支持 10.1 Safari iOS 完整支持 1 Samsung Internet Android 完整支持 1.0
any-hover media feature Chrome 完整支持 41 Edge 完整支持 16 Firefox 完整支持 64 IE 不支持 No Opera 完整支持 28 Safari 完整支持 9 WebView Android 完整支持 41 Chrome Android 完整支持 41 Firefox Android 完整支持 64 Opera Android 完整支持 28 Safari iOS 完整支持 9 Samsung Internet Android 完整支持 5.0
any-pointer media feature Chrome 完整支持 41 Edge 完整支持 12 Firefox 完整支持 64 IE 不支持 No Opera 完整支持 28 Safari 完整支持 9 WebView Android 完整支持 41 Chrome Android 完整支持 41 Firefox Android 完整支持 64 Opera Android 完整支持 28 Safari iOS 完整支持 9 Samsung Internet Android 完整支持 4.0
aspect-ratio media feature Chrome 完整支持 3 Edge 完整支持 12 Firefox 完整支持 3.5 IE 完整支持 9 Opera 完整支持 10 Safari 完整支持 5 WebView Android 完整支持 ≤37 Chrome Android 完整支持 18 Firefox Android 完整支持 4 Opera Android 完整支持 10.1 Safari iOS 完整支持 4.2 Samsung Internet Android 完整支持 1.0
calc() expressions Chrome 完整支持 66 Edge 完整支持 79 Firefox 完整支持 59 IE 不支持 No Opera 完整支持 53 Safari 完整支持 12 WebView Android 完整支持 66 Chrome Android 完整支持 66 Firefox Android 完整支持 59 Opera Android 完整支持 47 Safari iOS 完整支持 12 Samsung Internet Android 完整支持 9.0
color media feature Chrome 完整支持 1 Edge 完整支持 12 Firefox 完整支持 2 IE 完整支持 9 Opera 完整支持 10 Safari 完整支持 3 WebView Android 完整支持 ≤37 Chrome Android 完整支持 18 Firefox Android 完整支持 4 Opera Android 完整支持 10.1 Safari iOS 完整支持 1 Samsung Internet Android 完整支持 1.0
color-gamut media feature Chrome 完整支持 58 Edge 完整支持 79 Firefox 不支持 No IE 不支持 No Opera 完整支持 45 Safari 完整支持 10 WebView Android 完整支持 58 Chrome Android 完整支持 58 Firefox Android 不支持 No Opera Android 完整支持 43 Safari iOS 完整支持 10 Samsung Internet Android 完整支持 7.0
color-index media feature Chrome 完整支持 29 Edge 完整支持 79 Firefox 不支持 No IE 不支持 No Opera 完整支持 16 Safari 完整支持 8 WebView Android 完整支持 ≤37 Chrome Android 完整支持 29 Firefox Android 不支持 No Opera Android 完整支持 16 Safari iOS 完整支持 8 Samsung Internet Android 完整支持 2.0
device-aspect-ratio media feature 弃用 非标 Chrome 完整支持 1 Edge 完整支持 12 Firefox 完整支持 2 IE 完整支持 9 Opera 完整支持 10 Safari 完整支持 3 WebView Android 完整支持 ≤37 Chrome Android 完整支持 18 Firefox Android 完整支持 4 Opera Android 完整支持 10.1 Safari iOS 完整支持 1 Samsung Internet Android 完整支持 1.0
device-height media feature 弃用 非标 Chrome 完整支持 1 Edge 完整支持 12 Firefox 完整支持 2 IE 完整支持 9 Opera 完整支持 10 Safari 完整支持 3 WebView Android 完整支持 ≤37 Chrome Android 完整支持 18 Firefox Android 完整支持 4 Opera Android 完整支持 10.1 Safari iOS 完整支持 1 Samsung Internet Android 完整支持 1.0
device-width media feature 弃用 非标 Chrome 完整支持 1 Edge 完整支持 12 Firefox 完整支持 2 IE 完整支持 9 Opera 完整支持 10 Safari 完整支持 3 WebView Android 完整支持 ≤37 Chrome Android 完整支持 18 Firefox Android 完整支持 4 Opera Android 完整支持 10.1 Safari iOS 完整支持 1 Samsung Internet Android 完整支持 1.0
display-mode media feature Chrome 完整支持 45 Edge 完整支持 79 Firefox 完整支持 47 注意事项
完整支持 47 注意事项
注意事项 Firefox 47 and later support display-mode 值 fullscreen and browser . Firefox 57 added support for minimal-ui and standalone values.
IE 不支持 No Opera 完整支持 32 Safari 完整支持 13 WebView Android 完整支持 45 Chrome Android 完整支持 45 Firefox Android 完整支持 47 注意事项
完整支持 47 注意事项
注意事项 Firefox 47 and later support display-mode 值 fullscreen and browser . Firefox 57 added support for minimal-ui and standalone values.
Opera Android 完整支持 32 Safari iOS 完整支持 13 Samsung Internet Android 完整支持 5.0
forced-colors media feature Experimental Chrome 完整支持 79 注意事项 Disabled
完整支持 79 注意事项 Disabled
注意事项 见 bug 970285 .
Disabled ). To change preferences in Chrome, visit
Edge 完整支持 79 Firefox 完整支持 81 Disabled
完整支持 81 Disabled
Disabled ). To change preferences in Firefox, visit
IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No 注意事项
不支持 No 注意事项
注意事项 见 bug 970285 .
Chrome Android 不支持 No 注意事项
不支持 No 注意事项
注意事项 见 bug 970285 .
Firefox Android 不支持 No Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 不支持 No 注意事项
不支持 No 注意事项
注意事项 见 bug 970285 .
grid media feature Chrome 完整支持 1 Edge 完整支持 12 Firefox 完整支持 2 IE 完整支持 10 Opera 完整支持 10 Safari 完整支持 3 WebView Android 完整支持 ≤37 Chrome Android 完整支持 18 Firefox Android 完整支持 4 Opera Android 完整支持 10.1 Safari iOS 完整支持 1 Samsung Internet Android 完整支持 1.0
height media feature Chrome 完整支持 1 Edge 完整支持 12 Firefox 完整支持 2 IE 完整支持 9 Opera 完整支持 10 Safari 完整支持 3 WebView Android 完整支持 ≤37 Chrome Android 完整支持 18 Firefox Android 完整支持 4 Opera Android 完整支持 10.1 Safari iOS 完整支持 1 Samsung Internet Android 完整支持 1.0
hover media feature Chrome 完整支持 38 注意事项
完整支持 38 注意事项
注意事项 Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613 .
Edge 完整支持 12 Firefox 完整支持 64 IE 不支持 No Opera 完整支持 28 Safari 完整支持 9 WebView Android 完整支持 38 注意事项
完整支持 38 注意事项
注意事项 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 完整支持 50 Firefox Android 完整支持 64 Opera Android 完整支持 28 Safari iOS 完整支持 9 Samsung Internet Android 完整支持 5.0
inverted-colors media feature Chrome 不支持 No Edge 不支持 No Firefox 不支持 No IE 不支持 No Opera 不支持 No Safari 完整支持 9.1 WebView Android 不支持 No Chrome Android 不支持 No Firefox Android 不支持 No Opera Android 不支持 No Safari iOS 完整支持 10 Samsung Internet Android 不支持 No
Media feature expressions Chrome 完整支持 1 Edge 完整支持 12 Firefox 完整支持 1 IE 完整支持 9 Opera 完整支持 9.2 Safari 完整支持 1.3 WebView Android 完整支持 1 Chrome Android 完整支持 18 Firefox Android 完整支持 4 Opera Android 完整支持 10.1 Safari iOS 完整支持 3.1 Samsung Internet Android 完整支持 1.0
Media query value support Chrome 完整支持 66 Edge 完整支持 79 Firefox 完整支持 59 IE 不支持 No Opera 完整支持 53 Safari 不支持 No WebView Android 完整支持 66 Chrome Android 完整支持 66 Firefox Android 完整支持 59 Opera Android 完整支持 47 Safari iOS 不支持 No Samsung Internet Android 完整支持 9.0
monochrome media feature Chrome 完整支持 1 Edge 完整支持 79 Firefox 完整支持 2 IE 不支持 No Opera 完整支持 10 Safari 完整支持 3 WebView Android 完整支持 ≤37 Chrome Android 完整支持 18 Firefox Android 完整支持 4 Opera Android 完整支持 10.1 Safari iOS 完整支持 1 Samsung Internet Android 完整支持 1.0
Nested media queries Chrome 完整支持 26 Edge 完整支持 12 Firefox 完整支持 11 IE 不支持 No Opera 完整支持 12.1 Safari 完整支持 6.1 WebView Android 完整支持 ≤37 Chrome Android 完整支持 26 Firefox Android 完整支持 14 Opera Android 完整支持 12.1 Safari iOS 完整支持 7 Samsung Internet Android 完整支持 1.5
orientation media feature Chrome 完整支持 3 Edge 完整支持 12 Firefox 完整支持 2 IE 完整支持 9 Opera 完整支持 10.6 Safari 完整支持 5 WebView Android 完整支持 ≤37 Chrome Android 完整支持 18 Firefox Android 完整支持 4 Opera Android 完整支持 11 Safari iOS 完整支持 4.2 Samsung Internet Android 完整支持 1.0
overflow-block media feature Chrome 不支持 No Edge 不支持 No Firefox 完整支持 66 IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android 不支持 No Firefox Android 完整支持 66 Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 不支持 No
overflow-inline media feature Chrome 不支持 No Edge 不支持 No Firefox 完整支持 66 IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android 不支持 No Firefox Android 完整支持 66 Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 不支持 No
pointer media feature Chrome 完整支持 41 Edge 完整支持 12 Firefox 完整支持 64 IE 不支持 No Opera 完整支持 28 Safari 完整支持 9 WebView Android 完整支持 41 Chrome Android 完整支持 50 Firefox Android 完整支持 64 Opera Android 完整支持 28 Safari iOS 完整支持 9 Samsung Internet Android 完整支持 5.0
prefers-color-scheme media feature Chrome 完整支持 76 Edge 完整支持 79 Firefox 完整支持 67 IE 不支持 No Opera 完整支持 62 Safari 完整支持 12.1 WebView Android 完整支持 76 Chrome Android 完整支持 76 Firefox Android 不支持 No Opera Android 完整支持 54 Safari iOS 完整支持 13 Samsung Internet Android 完整支持 12.0
prefers-contrast media feature Experimental Chrome 不支持 No Edge 不支持 No Firefox 完整支持 80 Disabled
完整支持 80 Disabled
Disabled ). To change preferences in Firefox, visit
IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android 不支持 No Firefox Android 不支持 No Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 不支持 No
prefers-reduced-data media feature Experimental Chrome 完整支持 85 注意事项 Disabled
完整支持 85 注意事项 Disabled
注意事项 见 bug 1051189 .
Disabled ). To change preferences in Chrome, visit
Edge 完整支持 85 注意事项 Disabled
完整支持 85 注意事项 Disabled
注意事项 见 bug 1051189 .
Disabled From version 85: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to Enabled ).
Firefox 不支持 No IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No 注意事项
不支持 No 注意事项
注意事项 见 bug 1051189 .
Chrome Android 完整支持 85 注意事项 Disabled
完整支持 85 注意事项 Disabled
注意事项 见 bug 1051189 .
Disabled ). To change preferences in Chrome, visit
Firefox Android 不支持 No Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 不支持 No
prefers-reduced-motion media feature Chrome 完整支持 74 Edge 完整支持 79 Firefox 完整支持 63 IE 不支持 No Opera 完整支持 62 Safari 完整支持 10.1 WebView Android 完整支持 74 Chrome Android 完整支持 74 Firefox Android 完整支持 64 Opera Android 完整支持 53 Safari iOS 完整支持 10.3 Samsung Internet Android 完整支持 11.0
prefers-reduced-transparency media feature Experimental Chrome 不支持 No Edge 不支持 No Firefox 不支持 No IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android 不支持 No Firefox Android 不支持 No Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 不支持 No
resolution media feature Chrome 完整支持 29 Edge 完整支持 12 Firefox 完整支持 8
完整支持 8
部分支持 3.5 注意事项
注意事项 Supports <integer> values only.
IE 完整支持 9 Opera 完整支持 16
完整支持 16
不支持 10 — 15
Safari 不支持 No 注意事项
不支持 No 注意事项
注意事项 见 bug 78087 .
WebView Android 完整支持 ≤37 Chrome Android 完整支持 29 Firefox Android 完整支持 8
完整支持 8
部分支持 4 注意事项
注意事项 Supports <integer> values only.
Opera Android 完整支持 16
完整支持 16
不支持 10.1 — 14
Safari iOS 不支持 No 注意事项
不支持 No 注意事项
注意事项 见 bug 78087 .
Samsung Internet Android 完整支持 2.0
scan media feature Chrome 不支持 No Edge 不支持 No Firefox 不支持 No IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android 不支持 No Firefox Android 不支持 No Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 不支持 No
scripting media feature Chrome 不支持 No 注意事项
不支持 No 注意事项
注意事项 见 bug 489957 .
Edge 不支持 No 注意事项
不支持 No 注意事项
注意事项 见 bug 489957 .
Firefox 不支持 No 注意事项
不支持 No 注意事项
注意事项 见 bug 1166581 .
IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No 注意事项
不支持 No 注意事项
注意事项 见 bug 489957 .
Chrome Android 不支持 No 注意事项
不支持 No 注意事项
注意事项 见 bug 489957 .
Firefox Android 不支持 No 注意事项
不支持 No 注意事项
注意事项 见 bug 1166581 .
Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 不支持 No 注意事项
不支持 No 注意事项
注意事项 见 bug 489957 .
speech media type Chrome 不支持 No Edge 不支持 No Firefox 不支持 No IE 不支持 No Opera 完整支持 9.2 Safari 不支持 No WebView Android 不支持 No Chrome Android 不支持 No Firefox Android 不支持 No Opera Android 完整支持 10.1 Safari iOS 不支持 No Samsung Internet Android 不支持 No
update media feature Chrome 不支持 No Edge 不支持 No Firefox 不支持 No IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android 不支持 No Firefox Android 不支持 No Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 不支持 No
width media feature Chrome 完整支持 1 Edge 完整支持 12 Firefox 完整支持 2 IE 完整支持 9 Opera 完整支持 10 Safari 完整支持 3 WebView Android 完整支持 ≤37 Chrome Android 完整支持 18 Firefox Android 完整支持 4 Opera Android 完整支持 10.1 Safari iOS 完整支持 1 Samsung Internet Android 完整支持 1.0
-moz-device-pixel-ratio media feature 弃用 非标 Chrome 不支持 No Edge 不支持 No Firefox 完整支持 4 IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android 不支持 No Firefox Android 完整支持 4 Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 不支持 No
-webkit-animation media feature 弃用 非标 Chrome 不支持 2 — 36 Edge 不支持 No Firefox 不支持 No IE 不支持 No Opera 不支持 15 — 23 Safari 完整支持 4 WebView Android 不支持 ≤37 — ≤37 Chrome Android 不支持 18 — 36 Firefox Android 不支持 No Opera Android 不支持 14 — 24 Safari iOS 完整支持 3.2 Samsung Internet Android 不支持 1.0 — 3.0
-webkit-device-pixel-ratio media feature 非标 Chrome 完整支持 1 Edge 完整支持 12 Firefox 完整支持 63 注意事项
完整支持 63 注意事项
注意事项 Implemented as an alias for for -moz-device-pixel-ratio .
完整支持 49 注意事项 Disabled
注意事项 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.
完整支持 45 注意事项 Disabled
注意事项 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 preference (needs to be set to ). To change preferences in Firefox, visit about:config.
IE 不支持 No Opera 完整支持 15 Safari 完整支持 3 WebView Android 完整支持 ≤37 Chrome Android 完整支持 18 Firefox Android 完整支持 63 注意事项
完整支持 63 注意事项
注意事项 Implemented as an alias for for -moz-device-pixel-ratio .
完整支持 49 注意事项 Disabled
注意事项 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.
完整支持 45 注意事项 Disabled
注意事项 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 preference (needs to be set to ). To change preferences in Firefox, visit about:config.
Opera Android 完整支持 14 Safari iOS 完整支持 1 Samsung Internet Android 完整支持 1.0
-webkit-max-device-pixel-ratio media feature 非标 Chrome 完整支持 1 Edge 完整支持 12 Firefox 完整支持 63 注意事项
完整支持 63 注意事项
注意事项 Implemented as an alias for for max--moz-device-pixel-ratio .
完整支持 49 注意事项 Disabled
注意事项 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.
完整支持 45 注意事项 Disabled
注意事项 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 preference (needs to be set to ). To change preferences in Firefox, visit about:config.
IE 不支持 No Opera 完整支持 15 Safari 完整支持 3 WebView Android 完整支持 ≤37 Chrome Android 完整支持 18 Firefox Android 完整支持 63 注意事项
完整支持 63 注意事项
注意事项 Implemented as an alias for for max--moz-device-pixel-ratio .
完整支持 49 注意事项 Disabled
注意事项 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.
完整支持 45 注意事项 Disabled
注意事项 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 preference (needs to be set to ). To change preferences in Firefox, visit about:config.
Opera Android 完整支持 14 Safari iOS 完整支持 1 Samsung Internet Android 完整支持 1.0
-webkit-min-device-pixel-ratio media feature 非标 Chrome 完整支持 1 Edge 完整支持 12 Firefox 完整支持 63 注意事项
完整支持 63 注意事项
注意事项 Implemented as an alias for for min--moz-device-pixel-ratio .
完整支持 49 注意事项 Disabled
注意事项 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.
完整支持 45 注意事项 Disabled
注意事项 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 preference (needs to be set to ). To change preferences in Firefox, visit about:config.
IE 不支持 No Opera 完整支持 15 Safari 完整支持 3 WebView Android 完整支持 ≤37 Chrome Android 完整支持 18 Firefox Android 完整支持 63 注意事项
完整支持 63 注意事项
注意事项 Implemented as an alias for for min--moz-device-pixel-ratio .
完整支持 49 注意事项 Disabled
注意事项 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.
完整支持 45 注意事项 Disabled
注意事项 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 preference (needs to be set to ). To change preferences in Firefox, visit about:config.
Opera Android 完整支持 14 Safari iOS 完整支持 1 Samsung Internet Android 完整支持 1.0
-webkit-transform-2d media feature 非标 Chrome 不支持 2 — 36 Edge 不支持 No Firefox 不支持 No IE 不支持 No Opera 不支持 15 — 23 Safari 完整支持 4 WebView Android 不支持 ≤37 — ≤37 Chrome Android 不支持 18 — 36 Firefox Android 不支持 No Opera Android 不支持 14 — 24 Safari iOS 完整支持 3.2 Samsung Internet Android 不支持 1.0 — 3.0
-webkit-transform-3d media feature 非标 Chrome 不支持 2 — 36 Edge 不支持 12 — 79 Firefox 完整支持 49
完整支持 49
完整支持 46 Disabled
Disabled preference (needs to be set to ). To change preferences in Firefox, visit about:config.
IE 不支持 No Opera 不支持 15 — 23 Safari 完整支持 4 WebView Android 不支持 ≤37 — ≤37 Chrome Android 不支持 18 — 36 Firefox Android 完整支持 49
完整支持 49
完整支持 46 Disabled
Disabled preference (needs to be set to ). To change preferences in Firefox, visit about:config.
Opera Android 不支持 14 — 24 Safari iOS 完整支持 3.2 Samsung Internet Android 不支持 1.0 — 3.0
-webkit-transition media feature 弃用 非标 Chrome 不支持 2 — 36 Edge 不支持 No Firefox 不支持 No IE 不支持 No Opera 不支持 15 — 23 Safari 完整支持 4 WebView Android 不支持 ≤37 — ≤37 Chrome Android 不支持 18 — 36 Firefox Android 不支持 No Opera Android 不支持 14 — 24 Safari iOS 完整支持 3.2 Samsung Internet Android 不支持 1.0 — 3.0

图例

完整支持

完整支持

不支持

不支持

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

非标。预期跨浏览器支持较差。

非标。预期跨浏览器支持较差。

弃用。不要用于新网站。

弃用。不要用于新网站。

见实现注意事项。

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

另请参阅

元数据

  • 最后修改：
  1. CSS
  2. CSS 参考
  3. CSS Conditional Rules
  4. Media Queries
  5. 指南
    1. Using feature queries
    2. Testing media queries programmatically
    3. Using Media Queries for Accessibility
    4. Using media queries
  6. At-Rules
    1. @document
    2. @import
    3. @media
    4. @supports

Copyright  © 2014-2026 乐数软件    

工业和信息化部： 粤ICP备14079481号-1