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 Media Features are listed in the latest W3C recommendation for media queries, dated 6 June 2007.

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 has partial support, as does Safari 3. 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.