HTML and CSS Reference
In-Depth Information
Figure 10-34.
The navigation bar no longer fits on a single line in narrow windows
One solution might be to increase the page's
min-width
so it would stop shrinking before the navigation
can wrap, but that's not really much of a solution and short-changes our liquid width layout. Instead, we
can use a media query to shrink the navigation text when the window is too narrow; smaller text means
more can fit in a limited space.
In Listing 10-34 we've added a media query reducing the navigation's
font-size
when the viewport is
narrower than 880 pixels, a point just before the links begin to wrap. The text normally displays at the
16px
base size inherited from the
body
, but now we're overriding that with
font-size: 0.875em
, dropping it
down to 14 pixels (0.875 of 16 is 14). We've used ems instead of pixels to keep everything proportional to
the original base size.
Listing 10-34.
A media query to shrink our navigation bar in narrow windows
@media screen and (max-width: 880px) {
#nav-main {
font-size: 0.875em;
}
}
While we're at it, we can also
increase
the size when the window is wide enough to accommodate larger
text, making our navigation stand out even more for people who have room for it:
@media screen and (min-width: 960px) {
#nav-main {
font-size: 1.125em;
}
}
As you can see in Figure 10-35, the navigation remains on one line no matter the size of the window.
Older browsers that don't support media queries will still get the wrapping links in narrow windows, and
users who increase the base font size may have to cope with wrapping links as well, but we've made sure
the links remain readable and functional even if they do wrap. We also wouldn't want to reduce the text to
an unreadable size. If our min-width was even narrower or our navigation was longer—if we added another
category, or were translating into another language that might use longer words—we would probably find a
different solution. Your content should lead your design; don't let design dictate your content.
