Game Development Reference
In-Depth Information
Note
According to the specification, a browser is expected to, but not required to, con-
tinue to evaluate the expressions in media queries and update the CSS rules
as changes take place in the browser environment. In other words, if two me-
dia queries are specified in a page—one for a window with a width below a cer-
tain size and one with a width above that value—the browser is not required
to load the corresponding style sheet if the user manually resizes the browser
width without refreshing the page. However, since this isn't a very common use
case, it should not be of much concern to web designers. Besides, most modern
browsers do in fact re-evaluate media query expressions in real time.
There are nine media types that can be specified and targeted from a media query.
Alternatively, the keyword
all
can be used to indicate all media types. The allowed
media types in CSS media types are as follows:
•
braille
: Used for braille tactile feedback devices
•
handheld
: Used for handheld devices
•
print
: Used for printers
•
projection
: Used for projectors
•
screen
: Used for computer screens
•
tty
: Used for media using a fixed-pitch character grid
•
tv
: Used for televisions
•
embossed
: Used for paged braille printers
•
speech
: Used for speech synthesizers
The two operators that can be used to connect two or more expressions are the lo-
gical
AND
and
OR
operators, indicated by the
and
keyword and a
comma
character
respectively. Additionally, the logical
NOT
operator can be used to negate an expres-
sion. This operator is indicated by the
not
keyword.
// Applies media queries to:
// viewport width between [200px, 450px] OR
wider than orequals to 1200px
@media
