Media Queries

Media queries is a CSS3 extension to media types that allows us far greater control over rendering across different devices than do media types alone. Used in conjunction with a media type, a media query is a logical expression, evaluating to true or false, that tests one or more features of the output device to which the CSS is to be applied. Media queries can be used in <link> tags, XML processing instructions, the @import at-rule, and the @media at-rule. The CSS associated with the media query expression is only applied if the expression evaluates to true.

A logical expression can consist of either a media feature, or a media feature followed by a colon (:) and a value—similar to a normal property/value pair. A logical expression in a media query must be enclosed in parentheses (…). Let’s look at a some examples:

<link rel="stylesheet" type="text/css" href="/style.css"
    media="all and (color)">

<?xml-stylesheet media="all and (color)" rel="stylesheet"
    href="example.css" ?>
@import url(/style.css) all and (color);

@media all and (color) {
  ⋮ one or more rule sets…
}

In the above examples, we can see media queries used in the media attribute of a <link> tag and an XML processing instruction, and with the optional media type list in @import and @media at-rules. In all three examples, the media query uses the expression all and (color) to indicate that the CSS should be applied to all output media that are capable of representing color.

Here’s another example that applies to hand-held devices, but only if the viewport width is at least 20em:

@media handheld and (min-width:20em) {
  ⋮ one or more rule sets…
}

You can use multiple expressions in a media query if you join them with the and keyword. The following example applies the CSS if the output device is a screen-based device with a width between 800 and 1280 pixels:

@import url(/style.css) screen and (min-width:800px)
    and (max-width:1280px);

You can also use multiple, comma-separated media queries in a single at-rule:

@import url(/style.css) screen and (color), projection and (color);

The comma acts like an “or” keyword, so the above example will apply the CSS to color-screen or projection devices.

As you’ve seen in these examples, many of the media features can be prefixed with min- or max- to express boundary constraints. These prefixes should be thought of as “greater than or equal to” and “less than or equal to,” respectively. The W3C chose to use these prefixes instead of a syntax involving < and > characters, due to the special meaning those characters have in HTML and XML.

Media features generally apply only for certain media types. It’s meaningless to query color capabilities for "speech" media, or to specify a width in pixels for "tty" media—these kinds of logical expressions will always evaluate to false.

The media features in Table 1 are listed in the latest W3C recommendation for media queries, dated 6 June 2007.

Table 1. Media Features
Feature Value Min/Max Description
color integer yes number of bits per color component
color-index integer yes number of entries in the color lookup table
device-aspect-ratio integer/integer yes aspect ratio
device-height length yes height of the output device
device-width length yes width of the output device
grid integer no true for a grid-based device
height length yes height of the rendering surface
monochrome integer yes number of bits per pixel in a monochrome frame buffer
resolution resolution ("dpi" or "dpcm") yes resolution
scan "progressive" or "interlaced" no scanning process of "tv" media types
width length yes width of the rendering surface

The device-width and device-height features refer to the dimensions of the output device (that is, the screen size).

The width and height features, on the other hand, refer to the dimensions of the rendering surface, which is the viewport (for example, the browser window) for screen media, or the page box for print media.

Resolutions are specified using a number immediately followed by one of the units dpi (dots per inch) or dpcm (dots per centimeter).

Aspect ratios are specified as the quotient of two integers representing width/height: for example, 16/9 or 1280/1024.

Currently, support for media queries is limited. Opera 9.5 and up have full support. Safari 3 has partial support. Support for media queries is also appearing in browsers for other devices, such as Opera Mini 4, Opera for the Nintendo Wii, iPhone, and the Nokia S60 browser. Apple suggests using media queries as a way of targeting the iPhone browser, since, confusingly, that browser does not support the "handheld" media type.

User-contributed notes

ID:
#4
Contributed:
by Louis Lazaris
Date:
Thu, 14 Apr 2011 05:30:09 GMT
Status:
This note has not yet been confirmed for accuracy and relevance.

Last sentence in the 2nd paragraph says:

"Let's look at a some examples:"

The "a" should be removed.

ID:
#3
Contributed:
by joezim007
Date:
Tue, 17 Aug 2010 18:25:46 GMT
Status:
This note has not yet been confirmed for accuracy and relevance.

The link works now.

ID:
#2
Contributed:
by anuraggoel
Date:
Mon, 12 Jan 2009 00:58:43 GMT

The link for 'Apple suggests using media queries...' is broken as a result of Apple's site redesign.

Related Products