Layout with CSS3 - HTML5 and CSS3 - page 291

In this example, the default layout is a full — sized screen desktop
experience. Media queries were used to adapt to lower resolutions. For
practical uses, it's often better to do things the other way around—
when IE9 is released all the major desktop browsers will support media
queries. But IE on Windows Mobile 7 won't, and neither will browsers on
older feature phones. If you expect lots of these visitors, design for
the small screen and use media queries to adapt for larger devices.
Changing layout based on orientation and aspect ratio
Maybe you want to do different things on a display that's 640 pixels
wide and 480 pixels tall compared to one that is 640 pixels wide but
800 pixels tall—you want to know whether the aspect ratio is land-
scape or portrait for a given width. You can specify rules like this:
@media screen and (min-width: 640px and max-height: 480px) { }
@media screen and (min-width: 640px and min-height: 800px) { }
But this is a very fragile solution. For a start, you're missing windows
that are 640 pixels wide but, perhaps thanks to a permanent toolbar,
only 780 pixels tall. You could adjust to that particular case, but what if
some innovative manufacturer came up with a 700 x 500 pixel device?
In general, the idea behind media queries is for you to end up doing
less work—not rewriting chunks of your stylesheet for every possible
combination of width and height.
Fortunately, CSS3 provides an orientation media query for just this
situation:
@media screen and (min-width: 640px and orientation: portrait) { }
@media screen and (min-width: 640px and orientation: landscape) { }
Orientation is a special case of aspect-ratio . The previous two rules are
equivalent to these:
@media screen and (min-width: 640px and max-aspect-ratio: 1/1 ) { }
@media screen and (min-width: 640px and min-aspect-ratio: 1/1 ) { }
Using aspect-ratio , it's possible to distinguish between widescreen dis-
plays and traditional monitor sizes:
@media screen and (min-width: 640px and aspect-ratio: 16/9 ) { }
@media screen and (min-width: 640px and aspect-ratio: 4/3 ) { }