HTML Dog
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 */
}