Our volunteers haven't translated this article into Bahasa Indonesia yet. Join us and help get the job done!
You can also read the article in English (US).

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, 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
any-hover media feature4116 No1 No289
any-pointer media feature4112 No1 No289
aspect-ratio media feature ? ?3.59 ? No
color media feature Yes ? Yes ? Yes Yes
color-gamut media feature58 ? No No45 Yes
color-index media feature Yes ? No No ? ?
display-mode media feature46 No472 ? ? ?
grid media feature Yes ? Yes ? Yes Yes
height media feature ? ? ?9 ? ?
inverted-colors media feature No ? No No No Yes
hover media feature38312 No1 No289
light-level media feature No ? No No No No
monochrome media feature Yes ? Yes No Yes Yes
orientation media feature Yes ? Yes ? Yes Yes
pointer media feature4112 No1 ?289
resolution media feature29 ?

8

3.54

? Yes ?
scan media feature No ? No No No No
scripting media feature No5 ? No6 No No No
update media feature No ? No No No No
width media feature Yes ? Yes9 Yes Yes
-moz-device-pixel-ratio media feature No ?4 ? ? ?
-webkit-animation media feature Yes ? ? ? ? ?
-webkit-device-pixel-ratio media feature Yes ?

497 8

457 9

No Yes ?
-webkit-max-device-pixel-ratio media feature Yes ?

4910 8

4510 9

No Yes ?
-webkit-min-device-pixel-ratio media feature Yes ?

4911 8

4511 9

No Yes ?
-webkit-transform-2d media feature No No No No Yes1
-webkit-transform-3d media feature Yes ?

49

4612

? Yes1
-webkit-transition media feature No ? No ? Yes1
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 ?
any-hover media feature414116 No1289.25.0
any-pointer media feature414112 No1289.2 ?
aspect-ratio media feature ? ? ? ? ? No ?
color media feature ? ? ? ? ? ? ?
color-gamut media feature ?58 ? No45 ? ?
color-index media feature ? ? ? ? ? ? ?
display-mode media feature ?46 No472 ? ? ?
grid media feature ? ? ? ? ? ? ?
height media feature ? ? ? ? ? ? ?
inverted-colors media feature ? No ? No No Yes ?
hover media feature ?5012 No1289.2 ?
light-level media feature No No ? No No No ?
monochrome media feature ? ? ? ? ? ? ?
orientation media feature Yes ? ? ? ? ? ?
pointer media feature ?5012 No1289.2 ?
resolution media feature ? ? ? ? ? ? ?
scan media feature ? ? ? No ? ? ?
scripting media feature No5 No5 ? No6 No No ?
update media feature ? ? ? ? ? ? ?
width media feature ? ? ? ? ? ? ?
-moz-device-pixel-ratio media feature ? ? ? ? ? ? ?
-webkit-animation media feature ? ? ? ? ? ? ?
-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 ? ? No No ? ? ?
-webkit-transform-3d media feature ? ? ? ? ? ? ?
-webkit-transition media feature ? ? ? ? ? ? ?

1. See bug 1035774.

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

3. Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613.

4. Supports <integer> values only.

5. See bug 489957.

6. See bug 1166581.

7. Implemented as an alias for for -moz-device-pixel-ratio.

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

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

10. Implemented as an alias for for max--moz-device-pixel-ratio.

11. Implemented as an alias for for min--moz-device-pixel-ratio.

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

See also