HTML and CSS Reference
In-Depth Information
Logical operators
In addition to the logical
and
operator, media queries can include the logical
not
and
only
operators as well as the logical
or
operation. The comma (
,
) is used as the
or
operator to
separate groups of multiple queries. The following media rule is true if either the screen is
at least 700 pixels wide or if the device is in landscape mode:
@media (min-width: 700px), (orientation: landscape) {}
The
not
operator is used to negate an entire media query. It cannot negate an
individual feature. For example, the following media rule applies only if the device screen
is not 800 pixels wide:
@media not screen and (device-width: 800px) {}
The
only
operator was added to hide media queries from older browsers. According
to the specification, browsers that do not support media queries should interpret the
following rule as being applied to the
only
media type, which is invalid and thereby
causes the conditional style rules to be ignored.
/* Not applied in older browsers */
@media only screen and (min-width: 600px) {}
Regrettably, IE6-IE8 did not implement the specification correctly. The media query
is therefore ignored even if the
only
keyword is left out, instead of then applying the
media rule to all screen-based devices.
/* Not applied in IE 6-8 */
@media screen and (min-width : 600px) {}
Note that both the
not
and
only
operators require the use of an explicit media type,
whereas the logical
or
(
,
) and logical
and
operators do not.
Support for media queries has become widespread in all major browsers. The
min-width
and
max-width
queries, for example, are supported in Chrome 1+, Firefox
3.5+, IE9+, Safari 4+, and Opera 8+.
Testing media queries
It is important to test your media queries to make sure that your site looks good in as
many devices as possible. The latest web browsers all re-evaluate media queries as the
browser environment is changed (when the window is resized, for example). You can test
how your design responds to different device dimensions just by resizing your browser
window. A useful site that can help you during this testing process is ProtoFluid,
1
which
allows you to see how your site will look on many tablet and smartphone devices.
