Skip to navigation

Media Queries

Media queries are used to target CSS at specific media types and media features. Styles can be applied to print or to screens of a certain size, for example.

Applying media queries

Media queries can be added to a link HTML element:

<link rel="stylesheet" href="this.css" media="print">
<!-- applies an external print-only stylesheet -->

<link rel="stylesheet" href="that.css" media="screen and (max-width: 800px)">
<!-- applies an external stylesheet to screens up to 800 pixels wide -->

Media queries can also be embedded in stylesheets using an @media rule:

@media print {
    body {
        font-family: "Times New Roman", Times, serif;
    /* etc. */
/* applies styles to print only */

@media screen and (max-width: 800px) {
    body {
        padding: 0;
    /* etc. */
/* applies styles to screens up to 800 pixels wide */

@import can also be used (@import url(this.css) print, for example).

Media types

screen and print are the most common media types. all can also be used and is the default state of a media query. Others, with patchy support, are braille, embossed, handheld, projection, speech, tty, and tv.

Media features

Feature Description Possible values
  • width
  • min-width
  • max-width
Display area width. [length], eg. 800px
  • height
  • min-height
  • max-height
Display area height. [length], eg. 20em
  • device-width
  • min-device-width
  • max-device-width
Screen width. [length], eg. 2in
  • device-height
  • min-device-height
  • max-device-height
Screen height. [length], eg. 10cm
orientation Portrait (when height is greater than or equal to width) or landscape (when width is greater than height).
  • portrait
  • landscape
  • aspect-ratio
  • min-aspect-ratio
  • max-aspect-ratio
The ratio of the value of width to the value of height. [ratio], eg. 2/1
  • device-aspect-ratio
  • min-device-aspect-ratio
  • max-device-aspect-ratio
The ratio of the value of device-width to the value of device-height. [ratio], eg. 16/9
  • color
  • min-color
  • max-color
The number of bits per color component of a screen. [integer]
0 indicates a device is not color.
color without a value is the equivalent of min-color: 1 (device is color).
  • color-index
  • min-color-index
  • max-color-index
The number of entries in a device’s color lookup table. [integer]
0 indicates a device does not use a color lookup table.
color-index without a value is the equivalent of min-color-index: 1 (device uses a color lookup table).
  • monochrome
  • min-monochrome
  • max-monochrome
The number of bits per pixel on a grayscale device. [integer]
0 indicates a device is not grayscale.
monochrome without a value is the equivalent of min-monochrome: 1 (device is grayscale).
  • resolution
  • min-resolution
  • max-resolution
A device’s pixel density. [resolution], eg. 300dpi
scan Used with tv media type. The scanning process of a device.
  • progressive
  • interlace
grid If a device is grid (such as a teletype-like terminal) or bitmap. [integer]
0 indicates a device is not grid.
grid without a value is the equivalent of grid: 1 (device is grid).

Combining media queries

Logical OR: comma-separated list

A comma-separated list will apply styles to multiple media queries.

@media screen, projection {
    /* CSS applied if device is screen OR projection */

Logical AND: and

The and keyword will combine media queries.

@media print and (min-resolution: 150dpi) {
    /* CSS applied if device is print AND resolution is at least 150dpi */

Logical NOT: not

The not keyword will exclude media queries.

@media not screen {
    /* CSS applied if device is NOT screen */