CSS Media Query Quick Reference

Introduction

Apply different formatting to the Web page according to the display device;
Add intelligence to CSS style sheet to adjust font setting, layout, backgound images etc. according to the media features;

Using media queries

There are three ways to include media queries:

In the <link> tag in an HTML Web page. eg., <link rel="stylesheet" href="example.css" media="screen" />;
With @import rule in a CSS file, eg. @import url(example.css) screen;;
Use @media rule in a CSS file. eg., @media screen { ... /* CSS rules */ }

Media types

The media types defined in CSS2 are:

all
braille
embossed
handheld
print
projection
screen
speech
tty
and tv.

Logical operators

Multiple media types can be combined to several types of display devices. Additional display features can also be included to specify the minimum requirement of the media type, etc.

Logical and operator is used to specify all the criteria need to be satisfied in the query. eg., @media screen and (min-width: 700px) { ... }
Commas function like a logical or operator. The media query returns TRUE when either criterion is satisfied. eg., @media handheld, (min-width: 700px) { ... }
Logical not operator negate all the criteria. eg., @media not all and (monochrome) { ... }. It won't apply to media queries after commas.

Media feature

The syntax to use a media feature is (name: value).The following media features can be used in media queries:

Media feature	Meaning	Value
width/max-width/min-width	The width of the targeted display area of the output device	A length value. Eg., @media screen and (width: 480px)
height/max-height/min-height	The height of the targeted display area of the output device	A length value. Eg., @media screen and (height: 20em)
devide-width/max-devide-width/min-devide-width	The width of the rendering surface of the output device	A length value
devide-height/max-devide-height/min-devide-height	The height of the rendering surface of the output device	A length value
aspect-ratio/max-aspect-ratio/min-aspect-ratio	The ratio of the value of "width" feature to that of "height" feature	Two integers separated by /. Eg., @media screen and (aspect-ratio: 4/3)
device-aspect-ratio/max-device-aspect-ratio/min-device-aspect-ratio	The ratio of the value of "device-width" feature to that of "device-height" feature	Two integers separated by /. Eg., @media screen and (device-aspect-ratio: 16/9)
color/max-color/min-color	The number of bits per color component of the output device. If the device is not a color device, the value is 0.	Eg., @media all and (color)
color-index/max-color-index/min-color-index	The number of entries in the color lookup table of the output device. If the device is not a color device, the value is 0.	Eg., @media all and (min-color-index: 256)
monochrome/max-monochrome/min-monochrome	The number of bits per pixel in a monochrome frame buffer. If the device is not a monochrome device, the value is 0.	Eg., @media all and (min-monochrome: 1)
resolution/max-resolution/min-resolution	The density of pixels of the output device. resolution matches square pixels. max-resolution and min-resolution can match non-square pixels.	An integer with unit of dpi or dpcm. Eg., @media print and (min-resolution: 300dpi)
orientation	The orientation of the output device	portrait or landscape
scan	The scanning process of TV output device.	progressive or interlace

References

Media Queries
CSS media queries
Jason C. Teague, CSS3: Visual QuickStart Guide, 5th edition
Peter Gasston, The Book of CSS3: A Developer's Guide to the Future of Web Design