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