Responsive Web Design (addressing varying screen sizes)

Standard

[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:

  1. a media type (screen), and
  2. the actual query enclosed within parentheses, containing a particular media feature (max-device-width) to inspect, followed by the target value (480px).

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 loadshetland.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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s