HTML and CSS Reference
In-Depth Information
The features that can be selected in a media query are:
•
width
•
height
•
device-width
•
device-height
•
orientation
•
aspect-ratio
•
device-aspect-ratio
•
color
•
color-index
•
monochrome
•
resolution
•
scan
grid
Most of these support a
min-
and
max-
prefix, which avoids having to use a greater than or lesser than
operator. For example, if you wanted a style for windows between 500px and 700px, inclusive, you would specify
this as
•
@media screen and (min-width: 500px) and (max-width: 700px)
Notice in this example I also included the
screen
media type. In this case, this style is ignored for all other
types such as
print
.
■
For a complete definition on each of these features, see the W3 specification at
Tip
Using Media Queries
There is a lot that you can do with media queries to dynamically style your web page. For example, you could use
the
color
and
monochrome
features to apply more appropriate styles when displayed on a monochrome device.
The
color
feature returns the number of colors supported so
(min-color: 2)
will select all color devices. You
can also use
(orientation: portrait)
and
(orientation: landscape)
to arrange the elements based on the
devices orientation.
For this demonstration you will focus on the width of the window but the same basic concept applies to the
other features as well. As the width of the window shrinks, the styles will gradually adjust to accommodate the
size while retaining as much of the original layout as possible.
A typical approach is to plan for three different styles: large, medium, and small. The large style is probably
how the site is initially designed, as is the case with your Chapter
4
site. There are side bars and multiple columns
of content. The medium style will keep the same basic layout but start to shrink areas as needed. A useful
technique is to use relative sizing so as the window shrinks, each element gradually shrinks as well. The small
style will be used for handheld devices and you'll generally keep the layout to a single column. Since the page will
tend to be longer now, links to bookmarks on the page become more important.
