CSS Reference @rule

@media

The @media CSS at-rule allows you to specify a set of styles that are applied only to certain media types that you also specify in a @media declaration.

In other words, the @media rule specifies the target media types (separated by commas) of a set of statements or rules (delimited by curly braces). For example, the following snippet specifies a set of style rules that are to be applied to print media:

@media print {

    /* styles applied to print */
    body {
        font-size: 10pt;
    }

    a[href]:after {
        content: "(" attr(href) ")";
        /* ... */
    }

}
                

As shown in this example, the @media rule should be followed by the media type(s) and then by a set of style rules delimited in curly braces.

For a set of styles that you want to apply to more than one media type, you should separate the media types using commas:

@media screen {
    /* set of style rules that are applied to screen media */
}
                

There are ten recognized media types in CSS. See the Values section below for more information about each of them.

One of the most commonly used media types is the screen type. The print media type is used to specify styles for a printable document that apply when it is to be printed.

The screen media type is used as part of media queries. A media query consists of a media type and zero or more expressions that check for the conditions of particular media features—such as size, orientation, color, etc.

Media queries are used to provide styles for a document or elements in a document depending on the conditions of the media in question. The most common use case is using media queries with the screen media type to specify styles that allow a web page or an element in a page to adapt to the different screen sizes and orientation, as part of a responsive web design workflow.

A media query is a logical expression that is either true or false. If the result of the query is true, that is, if the user agent is running in a media type that matches the specified media type, and if the conditions of the media type also match (for example screen size), then the style rules inside the media block will be applied.

For example, the following @media declarations will specify a set of styles for the screen media type depending on the screen size:

@media screen and (max-width: 35em) {
    /* styles applied when the page/app is viewed on a screen with a width less than or equal to 35em */
}

@media screen and (orientation: landscape) {
    /* styles applied when the page/app is viewed on a screen in a landscape mode */
}

@media screen and (orientation: portrait) {
    /* styles applied when the page/app is viewed on a screen in a portrait mode */
}

@media handheld and (min-width: 20em), 
       screen and (min-width: 20em) {
    /* styles applied on screen and handheld devices if the width of the viewport is greater than 20em. */
}

@media screen and (device-aspect-ratio: 16/9) {
    /* styles applied to screen device with square pixels has 1280 horizontal pixels and 720 vertical pixels (commonly referred to as "16:9") */
}
                

There is a list of possible media queries that are used as conditions to the specified media types, including orientation, viewport width, device width, viewport height, color, aspect ratio, among others. For more information about them, check the Media Queries specification for a list of possible values and many examples.

You can declare the @media rules anywhere inside your style sheet. You can even choose to use a separate style sheet for @media declarations and then import it into the main style sheet using the @import at-rule.

Official Syntax

@media media-types [and media-query-conditions]? {
    /* media-specific styles */
}
                

The question mark indicates that the media query conditions are optional. If multiple media types are provided, they must be comma-separated.

Values

The following are a list of recognized media types that can be used in a @media rule declaration:

all
Suitable for all devices.
print
Intended for paged material and for documents viewed on screen in print preview mode.
screen
Intended primarily for color computer screens. This is the most commonly-used media type in web design.
speech
Intended for speech synthesizers.

Notes

A shorthand syntax is offered for media queries that apply to all media types; the keyword all can be left out (along with the trailing ‘and’). That is, if the media type is not explicitly given it is all. For example, these two are identical:

@media all and (min-width:500px) { … }
@media (min-width:500px) { … }
                

Media type names are case-insensitive.

The above media types fall into different media groups. The following table indicates which type falls into which group:

Relationship between media groups and media types
Media Types Media Groups
  continuous, paged visual, audio, speech, tactile grid, bitmap interactive, static
print paged visual bitmap static
screen continuous visual, audio bitmap both
speech continuous speech N/A both

Examples

The following changes the layout of a navigation bar on a small screen (when viewport width is less than 50em) so that the menu items are laid on top of each other, instead of sitting next to each other.

/* applies to all media */
nav ul li {

    display: inline-block;
    /* ... */

}

@media screen and (max-width: 50em) {

    nav ul li {
        display: block;
        margin-bottom: .5em;
        /*...etc...  */
    }

}
                

Live Demo

The following is a simple demo showing how styles specified inside media rules are applied when the viewport is resized (resize your browser). The background color of the page changes depending on the screen size. The following rules are applied in the demo:

body {
    background-color: #009966; /* a green color */
}

@media screen and (max-width: 1024px) {

    body {
        background-color: purple;
    }

}

@media screen and (max-width: 600px) {

    body {
        background-color: orange;
    }

}
                

Open the demo and resize your viewport to see the corresponding background color applied.

View this demo on the Codrops Playground

Browser Support

CSS3 Media Queries

Method of applying styles based on media information. Includes things like page and device dimensions

W3C Recommendation

Supported from the following versions:

Desktop

  • 4
  • 3.5
  • 5.5
  • 9.5
  • 3.1

Mobile / Tablet

  • 3.2
  • 2.1
  • 10
  • 56
  • 51

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by

Last updated March 17, 2017 at 12:49 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.