@media CSS At-Rule

Description

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. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.

Syntax

@media <media-types> {
  /* media-specific styles */
}

Values

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

Example

@media print {

     body {font-size: 10pt}

 }

@media screen {

     body {font-size: 13px}

 }

@media screen, print {

     body {line-height: 1.2}

}

Browser Support

Desktop
6	12	1	1	9.2	3
Tablets / Mobile
1	18	4	10.1	1	1.0

Last updated by CSSPortal on: 1st December 2019