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.
Search WWH ::

Custom Search