HTML and CSS Reference
In-Depth Information
In the same way, the following @media rule applies style rules only on a screen device
with a width of 400 pixels or more:
For mobile devices, the
width and height
features refer to the width
and height of the layout
viewport, not the visual
@media screen and (min-width: 400px) {
Creating a Media Query
• To create a media query for loading a style sheet, add the media attribute
media = “ devices and|or ( features )”
to the link element, where devices is a list of media devices, and features is a list
of display features and their values as found on those devices.
• To apply a media query to a collection of style rules, apply the @media rule
@media devices and|or ( features ) {
in your style sheet, where styles is those styles applied to the specified devices and
• To import a style sheet based on a media query, apply the following @import rule:
@import url( url ) devices and|or ( features )
Writing a Feature Expression
You can combine multiple media queries using logical operators such as and , not , and
or . For example, the @import rule
@import(mobile.css) all and (min-width: 320px and max-width: 480px);
imports the mobile.css style sheet file only when the width of the output device is
between 320 and 480 pixels (inclusive), while the statement
@import(tall.css) print and (orientation: portrait and min-height:
imports the tall.css file only for print devices whose orientation is portrait with a mini-
mum height in the page box of 9 inches.
Some media features are directed toward devices that do not have a particular property
or characteristic. This is done by applying the not operator, as in the following example:
<link href = “example.css” rel = “stylesheet”
media = “not screen and (max-width: 480px)” />
The not operator acts to negate whatever follows in the expression. In this case, the
initial expression (without the not operator) matches screen devices with maximum
widths of 480 pixels; negating the expression matches any device that's not a screen or
does not have a maximum width of 480 pixels.
Several media queries can be combined in a comma-separated list. If at least one of
the media queries is true, the entire expression is treated as true; otherwise, it's treated as
false. Thus, the expression
@media screen and (device-aspect-ratio: 16/9), projection and
(device-aspect-ratio: 16/9) {
loads the style rules only if the device is a screen or a projector with a device aspect
ratio of 16 to 9.
If you attempt to apply
a feature to a device
that doesn't support it,
the media query always
returns the value false .
Search WWH ::

Custom Search