HTML and CSS Reference
Targeting Styles with Media Queries
Media queries are simple conditions that test one or more of a device's features, allowing you to tailor style rules
to match the device's capabilities. This makes it possible to deliver the same HTML to smartphones, tablets, and
desktop computers, but with different styles optimized for the appropriate screen size and resolution. You specify
the conditions at the same time as the media type (see “Specifying the Media Type” in the preceding chapter).
CSS3 Media Queries became a formal recommendation in June 2012. So, they're stable and supported by
the latest versions of all browsers in widespread use. However, you should also provide styles for browsers, such
as IE 8 and earlier, that don't understand media queries. So-called feature phones —low-end devices with a basic
display—usually don't support media queries either.
Smartphones do understand media queries, but they automatically scale websites to fit a nominal viewport
that's much wider than the actual screen size. To ensure that mobile devices interpret dimensions correctly,
you need to add a viewport <meta > tag to the head of each web page. The W3C plans to replace this with a new
CSS feature, the @viewport rule, which Opera and IE 10 were the first to support on an experimental basis. This
chapter explains how the <meta > tag and @viewport relate to each other.
In this chapter, you'll learn about the following:
Which features you can test for with media queries
How to specify the conditions in a media query
Setting the viewport size to ensure that mobile devices interpret widths correctly
Understanding how browsers treat hidden elements
Dealing with images for high-resolution displays
Creating Responsive Web Designs
The term responsive web design was popularized by an article Ethan Marcotte wrote for A List Apart in 2010
( www.alistapart.com/articles/responsive-web-design/ ). The article was prompted by repeated requests
to build “an iPhone website.” This set Ethan wondering what would come next. An iPad website? Different
websites for different devices? His answer was this: “Rather than tailoring disconnected designs to each of an
ever-increasing number of devices, we can treat them as facets of the same experience.” Media queries are the
technology that makes this possible. The conditions in media queries test a device's features, such as width,
height, orientation, or aspect ratio, allowing you to adapt the web page's layout by serving styles best suited to
Before I explain the details, I suggest that you visit http://mediaqueri.es , an online gallery of websites that
use responsive web design. It shows screen shots of featured websites at typical widths for smartphones, tablets,
netbooks, and large desktops (see Figure 17-1 ). Clicking one of the screenshots takes you to the original site,
where you can examine the CSS using a browser's developer tools.