Media: Printing and Other Devices - The CSS - page 217

so the design feels more proportional to the “page” as presented, while
body copy remains at a standard, readable size?

This adaptation of presentation has been dubbed responsive design . It
takes the standard mechanics of flexible grids, relative sizing of fonts,
and other content elements and uses media queries to change the posi-
tioning of content, the sizing of elements, or the overall layout grid to
respond to the viewport the device is giving you to work with.

For an in-depth review of media queries and how you can use them to
design pages that adapt not just to media but also to other browser
scenarios, see Ethan Marcotte's article “Responsive Web Design”
( http://www.alistapart.com/articles/responsive-web-design/ ).

Browser Support
Media queries are currently supported in Safari 3+, Firefox 3.5+, Opera 7+,
Internet Explorer 9+, mobile WebKit, and Opera Mobile. Therefore, there
is wide support for them, except for IE 6 through IE 8's large chunk of the
desktop market.

It isn't so bad, though, because the support (or lack thereof) can be taken
into consideration as just another device criteria in many instances. For
mobile development, you're most likely putting handheld device types into
two or three buckets already—first specifying the most devices and then
breaking smartphones by screen size or orientation. The following example
shows a baseline style sheet going to all handhelds and then using media
queries with more specific style sheets for those more capable devices:

<link type=”text/css” media=” handheld ” src=”basic.css”>
<link type=”text/css” media=” handheld and portrait and color ”
➥ src=”enhanced_portrait.css”>

<link type=”text/css” media=” handheld and landscape and color ”
➥ src=”enhanced_landscape.css”>