Game Development Reference
In-Depth Information
all and (min-width: 200px) and (max-width:
450px),
(min-width: 1200px) {
/* ... */
}
// Applies media queries to:
// non-printer viewport width between [200px,
450px]
// OR any media type wider than or equal to
1200px
@media
not print and (min-width: 200px) and
(max-width: 450px),
all (min-width: 1200px) {
/* ... */
}
The 13 values that can be checked inside media query expressions are width,
height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio,
color, color-index, monochrome, resolution, scan, and grid. So long as the expres-
sion makes sense, any combination of these values can be used in an expression.
This is when some basic Boolean logic comes in handy as well as a bit of common
sense.
Finally, the units that can be used along with each expression are the same as CSS
units. We can use fixed units (such as pixels, centimeters, or inches) or relative units
(such as percentages or ems). As a refresher, the following list describes the pos-
sible units used in CSS, and thus, in media query expressions:
•
%
: percentage
•
in
: inch
•
cm
: centimeter
•
mm
: millimeter
•
em
: em (1 em = height of current font size)
•
ex
: ex (1 ex = height of a font)
•
pt
: point (1 point = 1/72 inch)
