HTML and CSS Reference
In-Depth Information
This appears in an external CSS file linked into the page. It specifies both the type of
media the enclosed CSS rules will apply to (in this case it's for displaying on a screen)
and the minimum and maximum width of the viewing screen on which the enclosed
rules would apply. It's not necessary to specify both the minimum and maximum widths.
A lot of other values can be selected against as well, such as an exact width, height, ori-
entation, color, resolution, and so on.
3
Note
Since media types (
screen
,
print
, etc.) are supported in older browsers,
the
@media
rule will not necessarily be ignored. The
only
keyword is added at the
beginning of the query to hide the enclosed style rules from older browsers, because
they will not recognize it, which will cause them to skip past the rest of the media query
declaration.
Using media queries in a tiered configuration is useful for accommodating ranges of
screen sizes, each fitting the content into a smaller and smaller screen area:
@media
only
screen
and
(min-width:768)
and
(max-
width:959px) {
body { width:768px; }
}
@media only screen and (min-width:480) and (max-
width:767px) {
body { width:480px; }
}
@media only screen and (max-width:479px) {
body { width:340px; }
}
These three rules constrain the width of the page through three screen size changes.
This example just shows constraining the width, but you will want to style the content
all-around for mobile viewing, which would likely mean larger text and larger link areas.
For example, the
City Press
news tips form used in
Chapter 4
might be altered using
media queries to appear in a mobile browser, as shown in
Figure 8-2
.
To tailor the con-
tent for the mobile environment, extraneous information has been positioned out of view
using CSS, and styles have been added to make the menu more prominent.
__________
Search WWH ::
Custom Search