[excerpts taken from this article]
Thankfully, the W3C created media queries as part of the CSS3 specification, improving upon the promise of media types. A media query allows us to target not only certain device classes, but to actually inspect the physical characteristics of the device rendering our work.
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />
The query contains two components:
- a media type (
- the actual query enclosed within parentheses, containing a particular media feature (
max-device-width) to inspect, followed by the target value (
In plain English, we’re asking the device if its horizontal resolution (
max-device-width) is equal to or less than
480px. If the test passes—in other words, if we’re viewing our work on a small-screen device like the iPhone—then the device will load
shetland.css. Otherwise, the
link is ignored altogether.
The way forward
Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.