W3cubDocs

/CSS

@media

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

Note: In JavaScript, the rules created using @media can be accessed with the CSSMediaRule CSS object model interface.

Try it

Syntax

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

Description

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 is 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.

Note: CSS2.1 and Media Queries 3 defined several additional media types (tty, tv, projection, handheld, braille, embossed, and aural), but they were deprecated in Media Queries 4 and shouldn't be used.

Media features

Media features describe specific characteristics of the user agent, 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.

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 Deprecated

Width-to-height aspect ratio of the output device. Deprecated in Media Queries Level 4.

device-height Deprecated

Height of the rendering surface of the output device. Deprecated in Media Queries Level 4.

device-width Deprecated

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.

dynamic-range

Combination of brightness, contrast ratio, and color depth that are supported by the user agent and the output device. Added in Media Queries Level 5.

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.

resolution

Pixel density 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.

video-dynamic-range

Combination of brightness, contrast ratio, and color depth that are supported by the video plane of user agent and the output device. Added in Media Queries Level 5.

width

Width of the viewport including width of scrollbar.

Logical operators

The logical operators not, and, only, and or can be used to compose a complex media query. You can also combine multiple media queries into a single rule by separating them with commas.

and

Used for combining multiple media features together into a single media query, requiring each chained feature to return true for the query to be true. It is also used for joining media features with media types.

not

Used to negate a media query, returning true if the query would otherwise return false. If present in a comma-separated list of queries, it will only negate the specific query to which it is applied. If you use the not operator, you must also specify a media type.

Note: In Level 3, the not keyword can't be used to negate an individual media feature expression, only an entire media query.

only

Applies a style only if an entire query matches. It is useful for preventing older browsers from applying selected styles. When not using only, older browsers would interpret the query screen and (max-width: 500px) as screen, ignoring the remainder of the query, and applying its styles on all screens. If you use the only operator, you must also specify a media type.

, (comma)

Commas are used to combine multiple media queries into a single rule. Each query in a comma-separated list is treated separately from the others Thus, if any of the queries in a list is true, the entire media statement returns true. In other words, lists behave like a logical or operator.

or

Equivalent to the , operator. Added in Media Queries Level 4.

Accessibility concerns

To best accommodate people who adjust a site's text size, use ems 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.

Security

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.

Formal syntax

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

Examples

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.

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
-moz-device-pixel-ratio No No 4 No No No No No 4 No No No
-webkit-animation 2–36 No No No 15–23 4 2–37 18–36 No 14–24 3.2 1.0–3.0
-webkit-device-pixel-ratio 1 12
63Implemented as an alias for -moz-device-pixel-ratio.
No 15 3 ≤37 18
63Implemented as an alias for -moz-device-pixel-ratio.
14 1 1.0
-webkit-max-device-pixel-ratio 1 12
63Implemented as an alias for max--moz-device-pixel-ratio.
No 15 3 ≤37 18
63Implemented as an alias for max--moz-device-pixel-ratio.
14 1 1.0
-webkit-min-device-pixel-ratio 1 12
63Implemented as an alias for min--moz-device-pixel-ratio.
No 15 3 ≤37 18
63Implemented as an alias for min--moz-device-pixel-ratio.
14 1 1.0
-webkit-transform-2d 2–36 No No No 15–23 4 2–37 18–36 No 14–24 3.2 1.0–3.0
-webkit-transform-3d 2 12 49 No 15 4 4.4 18 49 14 3.2 1.0
-webkit-transition 2–36 No No No 15–23 4 2–37 18–36 No 14–24 3.2 1.0–3.0
@media 1 12 1 6 9.2 3 ≤37 18 4 10.1 1 1.0
any-hover 41 16 64 No 28 9 41 41 64 28 9 5.0
any-pointer 41 12 64 No 28 9 41 41 64 28 9 4.0
aspect-ratio 3 12 3.5 9 10 5 ≤37 18 4 10.1 4.2 1.0
calc 66 79 59 No 53 12 66 66 59 47 12 9.0
color 1 12 2 9 10 3 ≤37 18 4 10.1 1 1.0
color-gamut 58 79 110 No 45 10 58 58 110 43 10 7.0
color-index 29 79 No No 16 8 4.4 29 No 16 8 2.0
device-aspect-ratio 1 12 2 9 10 3 ≤37 18 4 10.1 1 1.0
device-height 1 12 2 9 10 3 ≤37 18 4 10.1 1 1.0
device-width 1 12 2 9 10 3 ≤37 18 4 10.1 1 1.0
display-mode 42 79
47Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.
No 29 13 42 42
47Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.
29 12.2 4.0
dynamic-range 98 98 100 No 84 13.1 98 98 100 68 13.4 18.0
forced-colors 89 79 89 No No No
NoSee bug 970285.
NoSee bug 970285.
89 No No
NoSee bug 970285.
grid 1 12 2 10 10 3 ≤37 18 4 10.1 1 1.0
height 1 12 2 9 10 3 ≤37 18 4 10.1 1 1.0
hover
38Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613.
12 64 No 28 9
38Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613.
50 64 28 9 5.0
inverted-colors No No No No No 9.1 No No No No 10 No
media_features 1 12 1 9 9.2 3 4.4 18 4 10.1 1 1.0
media_query_values 66 79 59 No 53 No 66 66 59 47 No 9.0
monochrome 1 79 2 No 10 3 ≤37 18 4 10.1 1 1.0
nested-queries 26 12 11 No 12.1 7 4.4 26 14 12.1 7 1.5
orientation 3 12 2 9 10.6 5 ≤37 18 4 11 4.2 1.0
overflow-block 113 113 66 No No No 113 113 66 No No No
overflow-inline 113 113 66 No No No 113 113 66 No No No
pointer 41 12 64 No 28 9 41 50 64 28 9 5.0
prefers-color-scheme 76 79 67 No 62 12.1 76 76 67 54 13 14.2
prefers-contrast 96 96 101 No 82 14.1 96 96 101 No 14.5 17.0
prefers-reduced-data
85See bug 1051189.
85See bug 1051189.
No No
71See bug 1051189.
No
NoSee bug 1051189.
85See bug 1051189.
No No No No
prefers-reduced-motion 74 79 63 No 62 10.1 74 74 64 53 10.3 11.0
prefers-reduced-transparency No No 113 No No No No No No No No No
range_syntax 104 104 102
63Only supports range notations where the feature name comes before any value (width > 500px)
No 90 16.4 104 104 102
63Only supports range notations where the feature name comes before any value (width > 500px)
71 16.4 20.0
resolution 29 12 8
3.5Supports <integer> values only.
9 1610–15 16 4.4 29 8
4Supports <integer> values only.
1610.1–14 16 2.0
scripting
NoSee bug 489957.
NoSee bug 489957.
113 No No No
NoSee bug 489957.
NoSee bug 489957.
113 No No
NoSee bug 489957.
update 113 113 102 No No No 113 113 102 No No No
video-dynamic-range No No 100 No No No No No 100 No No No
width 1 12 2 9 10 3 ≤37 18 4 10.1 1 1.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media