media property CSS Reference

Definition and Usage

The @media CSS at-rule< associates a set of nested statements, in a CSS block, that is delimited by curly braces, with a condition defined by a media query. The @media at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.

The @media at-rule can be accessed via the CSS object model interface CSSMediaRule.


@media <media types> {
  /* media-specific rules */

Media types

Suitable for all devices.
Intended for braille tactile feedback devices.
Intended for paged braille printers.
Intended for handheld devices (typically small screen, limited bandwidth).
Intended for paged material and for documents viewed on screen in print preview mode.
Intended for projected presentations, for example projectors. Please consult the section on paged media for information about formatting issues that are specific to paged media.
Intended primarily for color computer screens.
Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details.
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 the "tty" media type.
Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

Media groups

Media types are also part of different Media Groups. The following table indicates which types are in which group.

Type continuous paged visual audio speech tactile grid bitmap interactive static
braille X         X X   X X
embossed   X       X X     X
handheld X X X X X   X X X X
print   X X         X   X
projection   X X         X X  
screen X   X X       X X X
speech X       X       X X
tty X   X       X   X X
tv X X X X       X X X


@media print {
  body { font-size: 10pt }
@media screen {
  body { font-size: 13px }
@media screen, print {
  body { line-height: 1.2 }


Desktop browsers

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 9.0 9.2 1.3

Mobile browsers

Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1.7) 9.0 9.0 3.1

Relative articles