We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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.

Note: In JavaScript, @media can be accessed via the CSSMediaRule CSS object model interface.

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.

Formal syntax

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

Examples

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

For more examples, please see Using media queries.

Accessibility concerns

To best accommodate people who zoom in or out to adjust a site's text size, use ems when you need a <length> for your media queries.

Specifications

Specification Status Comment
CSS Conditional Rules Module Level 3
The definition of '@media' in that specification.
Candidate Recommendation Defines the basic syntax of the @media rule.
Media Queries Level 4
The definition of '@media' in that specification.
Candidate Recommendation

Adds scripting, pointer, hover, light-level, update-frequency, 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.

Media Queries
The definition of '@media' in that specification.
Recommendation No change.
CSS Level 2 (Revision 1)
The definition of '@media' in that specification.
Recommendation Initial definition.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1 Yes169.21.3
speech media type No No No No9.2 No
Media feature expressions1 Yes199.21.3
resolution media feature29 ?

8

3.51

? Yes ?
display-mode media feature ? No472 ? ? ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support1 ? Yes493.1 ?
speech media type No ? No No9 No No
Media feature expressions1 ? Yes493.1 ?
resolution media feature ? ? ? ? ? ? ?
display-mode media feature ? ? No472 ? ? ?

1. Supports <integer> values only.

2. Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.

See also