Media Queries 9
For example, take a look at the technology website The Next Web
(http://thenextweb.com/), as shown in Figure 2-1.
Figure 2-1: The Next Web website viewed in a desktop browser and a mobile browser
(inset)
When viewed in a desktop browser, the site features a long horizontal
top navigation, related content on the left of the page, and main content
laid out in a grid. Through the power of media queries, when you view the
same site in a narrower browser—such as an iPhone would use—the naviga-
tion is more compact with sharing options hidden away, the related content
has been moved off screen, and the main content on the page is moved into
a single column, which is ideal for scrolling down.
Of course, the Web now appears on more than just desktop and smart-
phone devices, and we really need to be working toward the common goal
of websites optimized for any device. See “Responsive Web Design” on
page 10 for more on this.
And if you want to see what other people have been doing with media
queries, you’ll find a great gallery online at http://www.mediaqueri.es/, which
showcases some of the better examples of what’s possible.
Syntax
A media query sets a parameter (or series of parameters) that enables asso-
ciated style rules if the device used to view the page has properties that match
that parameter. You can use media queries in three ways, all of which match
the different ways that CSS can be applied to a document. The first is to call
an external style sheet using the link element:
<link href="file" rel="stylesheet" media="logic media and (expression)">
