Where fluid grids and media queries come together

If you remember, earlier in the chapter, our navigation links were still spanning multiple lines at certain viewport widths. We can fix this problem with media queries. If our links fall apart at 1060 px and work again at 768 px (where our earlier media query takes over), let's set some additional font styles for the ranges in-between:

@media screen and (min-width: 1001px) and (max-width: 1080px) {
  #navigation ul li a { font-size: 1.4em; }
}
@media screen and (min-width: 805px) and (max-width: 1000px) {
  #navigation ul li a { font-size: 1.25em; }
}
@media screen and (min-width: 769px) and (max-width: 804px) {
  #navigation ul li a { font-size: 1.1em; }
}

As you can see, we're changing the font size based upon the viewport width and the result is a set of navigation links that always sit on one line, throughout the range of 769 px to infinity. Evidence again of the symbiosis between media queries and fluid layouts— media queries limit the...