Description

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

It’s up to you to decide whether you prefer to use separate style sheets for different media, or to use a single style sheet with @media rules.

In the expanded example below, the first set of rules will be applied only for screen and projection media (Opera uses the latter in its full-screen mode). 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;
  }
}

Compatibility

An @media rule won’t fail in Internet Explorer 6 or 7 if a media type is omitted, though it should, and appears to default to all. The same bug is apparent in Firefox versions up to and including 3.5.