A grid of small wooden drawers

Traditional CSS supported display rules for a limited number of devices, such as all, screen, print, handheld, television, and projector. None of these made any conclusions about the size, orientation, or resolution of the device: a “screen” could be 4 inches wide or 400, and the same presentational rules would apply to both. CSS 2.1 and up provides an alternate and impressive array of controls that allow you to target style rules to devices with particular capabilities, via media queries.

It's possible to write media queries into the code linking to a stylesheet:

<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" 

In the code above, styles_h.css will only be used by devices that are screen based and have a maximum width of 480 pixels. Note that this is device width: if you wished to use a stylesheet that targeted a browser that was minimized to 480 pixels wide, the syntax changes slightly:

<link rel=stylesheet media="only screen and (max-width: 480px)" 

Writing separate stylesheets for different media formats and screen sizes is neither practical nor efficient: when the browser loads the page it will access all of the referenced stylesheet files, regardless of the current resolution. These extra HTTP requests will slow the load time of your page. It's usually a far better practice to incorporate all of your designs into a central styles.css stylesheet, using the @media syntax:

/* standard CSS rules read by all devices and applicable to all resolutions */
html, body { }
@media print { 
	/* specific CSS rules for print, added only if they conflict with the rules above */
@media only screen and (max-width : 1200px) {
	/* style rules for desktops and laptops with smaller screens, 
	again only added if the rules here conflict with those at the 
	top of the stylesheet */
@media only screen and (min-width : 768px) and (max-width : 1024px) {
@media only screen and (max-width : 480px) {

It’s important to note that these “breakpoints” should not be dictated by the dimensions of popular devices, but by where your site needs intervention.

Even without specific @media queries, a website designed to fluid principles will usually scale well when displayed on smaller devices. If you find that this is not the case, the addition of a meta tag in the <head> may help:

<meta name="viewport" content="width=device-width, initial-scale=1">

Finally, it should be noted that while it is possible to nest media queries:

@media screen {
	body { background: yellow }
@media (min-width: 0px) {
	body { background: green }

Photograph by Jeremy Keith used under a Creative Commons Attribution 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.