HTML and CSS Reference
In-Depth Information
chapter 17
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
those features.
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.
