An Overview of HTML5 - Learn HTML5 by Creating Fun Games - page 33

with respect to the window's height. If the window happens to be higher than it
is wider, then for all practical purposes, the page is considered to be in the por-
trait mode. Similarly, if you manually resize the window, or if it just happens to
be in a position where it is wider than higher, then the browser will consider the
page to be in the landscape mode, and any media queries targeting the mode
will be triggered.
@media (max-width: 240px) {
body {
background: RGB(100%, 100%, 100%);
}
}
In the previous example, we tell the browser to check if the window is less than or
equal to 240 pixels wide. If it is, we define the CSS rule that tells the body tag to
render itself with a white background.
@media (min-width: 800px) and (max-width:
1200px), (min-height: 5000px) {
body {
background: RGB(0%, 100%, 0%);
}
}
As a last example for now, we tell the browser to check for a few different conditions
in the previous code snippet. If at least one of the conditions evaluates to true, then
the CSS rules inside that media query block will be made available to the page. This
can be very helpful when reusing rules for different conditions, or when simply creat-
ing different rules to be applied in different situations. In this particular case, we set
the background color of the body tag to a bright green whenever one of two (or both)
conditions are true: the window is at least 5000 pixels tall, or the window's width is
between 800 pixels and 1200 pixels (both values inclusive).