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
viewport.
@media screen and (min-width: 400px) {
styles
}
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
) {
styles
}
in your style sheet, where
styles
is those styles applied to the specified devices and
features.
• 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:
9in);
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) {
styles
}
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
.
