HTML and CSS Reference
In-Depth Information
Media rules are typically placed at the bottom of the style sheet, which allows the
cascade to override the rules defined earlier. If the style sheet contains a lot of conditional
rules, it might be preferable to move them to a separate style sheet that is included
after the primary style sheet. The media condition can then be specified with the
media
attribute on the
<link>
element.
<link rel="stylesheet" media="print" href="myprint.css">
This style sheet contains the print condition, so it is applied only when the document
is sent to print media. Keep in mind that browsers still download a style sheet, even if its
media condition is false.
Media queries
CSS 3 went a step farther by allowing media rules to target the capabilities of the device,
not just its type. It introduced a wide range of media features that can be targeted, as seen
in the following list. All these features, except for
orientation
,
grid
, and
scan
, can be
prefixed with
min-
or
max-
to define constraints.
width | height | device-width | device-height | aspect-ratio | device-
aspect-ratio | resolution | orientation | color | color-index | monochrome
The most important media features,
min-width
and
max-width
, allow you to create
responsive designs in which the site layout changes based on the viewport of the device's
browser.
A media query combines a media type and a condition consisting of one or more
media features. For example, the rules within the following media query are applied only
when viewed on screen-based media with a minimum width of 600 pixels:
@media screen and (min-width: 600px) {}
Media queries are case-insensitive, and parentheses around the condition are
required. The
and
operator seen here is used to combine the media type and the media
feature, but it can also combine multiple media features together:
@media (max-width: 500px) and (min-aspect-ratio: 1/1) {}
This media query is true if the viewing device has a max width of 500 pixels and at
least a 1:1 aspect ratio (square or landscape viewport). Notice that the media type is left
out here, so the rule applies to all media types.
