HTML5 and Mobile Game Development - Learn HTML5 by Creating Fun Games - page 355

orientation
Since media queries don't allow for comparison between two attributes (for example,
if width is greater than or equal to height), orientation allows us to determine which
way a media type is rotated. Had there been comparison operators included in the
CSS media query engine, we could easily determine if a page was in landscape
mode. To do that, we simply need to determine if the width is greater than the height.
If the two sides are of the same length (a square viewport), the specification determ-
ines the media to be in portrait mode. However, since such an approach is not pos-
sible directly with media queries, we can instead use the much more intuitive orient-
ation attribute.
The two possible values for the attribute are, with little surprise, portrait and
landscape . The prefixes min and max are not allowed with this query, since it
doesn't make sense to classify something as being at least landscape or no more
than portrait.
@media all and (orientation: portrait) {
body {
backgroundcolor: red;
}
}
@media all and (orientation: landscape) {
body {
backgroundcolor: green;
}
}
@media all and
not (orientation: portrait) and
not (orientation: portrait) {
body {
backgroundcolor: blue;
}
}