Fandom

HTML & CSS Wiki

@media

649pages on
this wiki
Add New Page
Comments0 Share

The CSS @media @-rule is used to specify that one or more rule sets in a style sheet will apply only to certain media types. This at-rule must be followed by a comma-separated list of media types and a block that contains rules.


In the example below, the first set of rules will be applied only for screen and projection media. The second set of rules will be applied only when the document is printed or viewed in print preview mode:

@media screen, projection {
  html {
    background:#FFFEF0;
    color:#300;
  }
  body {
    max-width:35em;
    margin:0 auto;
  }
}

@media print {
  html {
    background:#FFF;
    color:#000;
  }
  body {
    padding:1in;
    border:0.5pt solid #666;
  }
}

Media Types

Media Type Description
all Suitable for all devices.
braille Intended for braille tactile feedback devices.
embossed Intended for paged braille printers.
handheld Intended for handheld devices (typically small screen, limited bandwidth).
print Intended for paged material and for documents viewed on screen in print preview mode.
projection Intended for projected presentations, for example projectors.
screen Intended primarily for color computer screens.
speech Intended for speech synthesizers.
tty Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with this media type.
tv Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

External Links

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.