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 |
---|---|---|
|
Display area width. | [length], eg. 800px |
|
Display area height. | [length], eg. 20em |
|
Screen width. | [length], eg. 2in |
|
Screen height. | [length], eg. 10cm |
orientation |
Portrait (when height is greater than or equal to width) or landscape (when width is greater than height). |
|
|
The ratio of the value of width to the value of height . |
[ratio], eg. 2/1 |
|
The ratio of the value of device-width to the value of device-height . |
[ratio], eg. 16/9 |
|
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). |
|
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). |
|
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). |
|
A device’s pixel density. | [resolution], eg. 300dpi |
scan |
Used with tv media type. The scanning process of a device. |
|
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 */
}