Game Development Reference
In-Depth Information
pc : pica (1 pica = 12 points)
px : CSS pixels
The rest of this section will contain a more detailed explanation of each of the valid
values used in media queries, along with examples for each.
width
When queried against a continuous media type, the value refers to the total viewport
(visible window area) width of the device, including any rendered scroll bars. When
queried against a paged media type, the total width measured against is the width of
the output page.
Optionally, the prefixes min and max can be used with the width keyword, allowing
us to specify ranges, rather than discrete values.
@media all and (min-width: 250px) {
body {
background: red;
}
}
@media all and (max-width: 249px) {
body {
background: blue;
}
}
The preceding snipped specifies two media queries that apply to all media types.
When the output width is less than 250 (exclusive), the background color is set to
blue. Otherwise, the background color becomes red. As is the case with most mod-
ern browsers, we can resize the browser window manually and the new CSS rules
will apply automatically. Otherwise, the properties are tested and set at the time the
browser renders the page the first time.
In the following illustration, the window on the left is not quite wide enough to trigger
the first media query on the previous snippet, which causes the second snippet to
evaluate to true. By simply resizing the browser window (which can be done by max-
Search WWH ::




Custom Search