CSS @media rule

Definition and usage

@media rules are used in media queries to apply different styles for different media types/devices.

Media queries can be used to check many things, such as:

  • Width and height of the viewport
  • Width and height of the device
  • Orientation (is the phone or tablet in landscape or portrait mode?)
  • Resolution

Using media queries is a popular technique for providing customized style sheets for desktops, laptops, tablets, and mobile phones (responsive web design).

You can also use media queries to specify styles that are only applicable to printed documents or screen readers (mediatype: print, screen, or speech).

In addition to media types, there are also media features. Media features provide more specific details for media queries by allowing the testing of specific characteristics of user agents or display devices. For example, you can apply styles only to screens wider or narrower than a specific width.

See Also:

CSS Tutorial:CSS Media Queries

CSS Tutorial:CSS Media Query Examples

RWD Tutorial:Implementing Responsive Web Design with Media Queries

JavaScript Reference Manual:window.matchMedia() Method

Instance

Example 1

If the width of the browser window is 600px or less, change the background color of the <body> element to 'light blue':

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Try it yourself

More TIY examples can be found at the bottom of the page.

CSS Syntax

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

Meaning of not, only, and and keywords:

not: The not keyword reverses the meaning of the entire media query.

only: The only keyword prevents older browsers from applying the specified styles, which do not support media queries with media features. It has no effect on modern browsers.

and: The and keyword combines media features with media types or other media features.

They are all optional. However, if not or only is used, the media type must also be specified.

You can also use different style sheets for different media, like this:

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
....

Media type

Value Description
all Default. Used for all media type devices.
print Used for printers.
screen Used for computer screens, tablets, smartphones, and more.
speech Screen reader used to read the page aloud.

Media feature

Value Description
any-hover

Is there any available input mechanism that allows the user (such as a mouse) to hover over elements?

Added in Media Queries Level 4.
any-pointer

Are there any pointer devices among the available input mechanisms, and if so, how precise are they?

Added in Media Queries Level 4.
aspect-ratio The aspect ratio of the viewport.
color

The bit value of each pixel on the output device, commonly 8, 16, 32 bits.

If the device does not support output color, this value is 0.
color-gamut

The color gamut supported by the user agent and output device to a rough extent.

Added in Media Queries Level 4.
color-index

The number of entries in the color lookup table (color lookup table) of the output device.

If the device does not use a color lookup table, this value is 0.
device-aspect-ratio

The aspect ratio of the output device.

Has been deprecated in Media Queries Level 4.
device-height

The height of the rendering surface of the output device (such as the screen).

Has been deprecated in Media Queries Level 4.
device-width

The width of the rendering surface of the output device (such as the screen).

Has been deprecated in Media Queries Level 4.
display-mode

The display mode of the application, as specified by the display member in the manifest of a web app

Defined in the Web App Manifest spec.
forced-colors

Whether the user agent restricts the palette.

Added in Media Queries Level 5.
grid Whether the output device uses a grid screen or a dot matrix screen?
height The height of the viewport.
hover

Whether the main input mechanism allows the user to hover over elements?

Added in Media Queries Level 4.
inverted-colors

Whether the browser or the underlying operating system has inverted colors.

Added in Media Queries Level 5.
light-level

The current level of ambient light.

Added in Media Queries Level 5.
max-aspect-ratio The maximum ratio between the width and height of the display area.
max-color The maximum number of bits for each color component on the output device.
max-color-index The maximum number of colors that the device can display.
max-height The maximum height of the display area, such as a browser window.
max-monochrome The maximum number of bits for each 'color' on monochrome (grayscale) devices.
max-resolution The maximum resolution of the device, using dpi or dpcm.
max-width The maximum width of the display area, such as a browser window.
min-aspect-ratio The minimum ratio between the width and height of the display area.
min-color The minimum number of bits for each color component on the output device.
min-color-index The minimum number of colors that the device can display.
min-height The minimum height of the display area, such as a browser window.
min-monochrome The minimum number of bits for each 'color' on monochrome (grayscale) devices.
min-resolution The minimum resolution of the device, using dpi or dpcm.
min-width The minimum width of the display area, such as the browser window.
monochrome

The bit depth of each pixel in the monochrome frame buffer of the output device.

If the device is not a monochrome screen, the value is 0.
orientation The rotation direction of the viewport (landscape or portrait mode).
overflow-block

How does the output device handle the content that overflows the viewport along the block axis?

Added in Media Queries Level 4.
overflow-inline

Is the content that overflows the viewport along the inline axis scrollable?

Added in Media Queries Level 4.
pointer

Is the primary input mechanism a pointer device? If so, how accurate is it?

Added in Media Queries Level 4.
prefers-color-scheme

Detect whether the user prefers a light or dark color scheme.

Added in Media Queries Level 5.
prefers-contrast

Detect if the user has requested to increase or decrease the contrast between similar colors.

Added in Media Queries Level 5.
prefers-reduced-motion

Does the user want fewer dynamic effects on the page?

Added in Media Queries Level 5.
prefers-reduced-transparency

Does the user tend to choose lower transparency?

Added in Media Queries Level 5.
resolution The resolution of the output device, using dpi or dpcm.
scan The scanning process of the output device (suitable for TVs and others).
scripting

Detect whether scripting (such as JavaScript) is available.

Added in Media Queries Level 5.
update

The frequency at which the rendering result of the output device is updated.

Added in Media Queries Level 4.
width The width of the viewport.

More examples

Example 2

Hide elements when the browser width is 600px or smaller:

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Try it yourself

Example 3

If the viewport width is 800 pixels or wider, use a media query to set the background color to lavender; if the viewport width is between 400 and 799 pixels, then use a media query to set the background color to light green. If the viewport is less than 400 pixels, the background color will be light blue:

body {
  background-color: lightblue;
}
@media screen and (min-width: 400px) {
  body {
    background-color: lightgreen;
  }
}
@media screen and (min-width: 800px) {
  body {
    background-color: lavender;
  }
}

Try it yourself

Example 4

Create a responsive navigation menu (horizontal display on large screens, vertical display on small screens):

@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

Try it yourself

Example 5

Use media queries to create a responsive column layout:

/* Change from four columns to two columns on screens 992px or smaller */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* Stack the columns rather than display them side by side on screens with a width less than or equal to 600 pixels */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Try it yourself

Example 6

Use media queries to create a responsive website:

Try it yourself

Example 7

Media queries can also be used to change the page layout based on the browser's orientation. You can write a set of CSS properties that apply only when the browser window's width is greater than its height (i.e., 'landscape' orientation).

Use a light blue background color if the orientation is in landscape mode:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Try it yourself

Example 8

Use media queries to set the text color to green when displaying the document on the screen and black when printing:

@media screen {
  body {
    color: green; 
  }
}
@media print {
  body {
    color: black; 
  }
}

Try it yourself

Example 9

Comma-separated list: Use a comma to add another media query to an existing media query (its behavior is similar to the OR operator):

/* Change the appearance of <div> when the width is between 600px and 900px or greater than 1100px */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

Try it yourself

Browser support

The numbers in the table indicate the first browser version that fully supports @media rules.

Chrome IE / Edge Firefox Safari Opera
21 9 3.5 4.0 9