How To Use Media Queries For Device Targeting

Posted: 30 Jun 2011 05:30 AM PDT

Media queries are a way to serve different css rules to different devices and device characteristics. They’re the final piece in allowing us to create designs that are truly responsive to our audience and how our visitors choose to view our sites.

The last few weeks we’ve been building up toward responsive layouts, first by creating flexible girds and then by adding flexible images and media inside those grids. Today we’ll add media queries to the mix.

All of these posts rely heavily on the work of Ethan Marcotte and so before getting started I want to point you again to some of Ethan’s writing on the subject.

I highly recommend the last link above, which is Ethan’s new book on responsive design. If you buy the digital version (PDF, ePub, and mobi) it’ll only set you back $9, which will be money well spent.

Media Types

As I mentioned above media queries are a way to serve different css based on device and device characteristics.

For example we can send certain css to a browser on a laptop open 1200px wide and send different css to a mobile browser open to 480px and a third set of css to a tv screen displaying at 1024px.

We’ve actually been using a part of media queries for years, namely media types so let’s been there.

The html below should look familiar to you. We use it all the time to include a css file in an html document.

 < link rel="stylesheet" type="text/css" href="core.css"  media="screen" / >

Note the media=”screen” at the end. That’s a media type. You may have written a print specific stylesheet at some point for which you’d use media=”print”

There are a variety of other media types you could use beyond screen and print.

all — for all the media types below
braille — for braille tactile feedback devices
embossed — for paged braille printers
handheld — for handheld devices like mobile phones
print — for printed material
projection — for projected presentations
screen — for color computer screens
speech — for speech synthesizers
tty — for teletypes, terminals, and other devices with limited display capabilities
tv — for televisions and television like devices

Media types are useful, but they aren’t enough. Not every device lists itself properly and realistically what works on one handheld device or tv might not work on another.

Enter media queries.

Media Queries

Building on top of media types the W3C added media queries. A simple media query looks like the following:

 @media screen and (max-width: 1200px) { 	css here&hellip }

It begins with the media type (in this case screen) and is followed by the query as a feature: value pair. Here we’re targeting browsers with a max-width of 1200px

The type and the query are joined by the “and” operator. We’ll see in a bit that we can chain this operator to target very specific devices and characteristics

Above we started the media query with @media, but there are actually 3 ways to include media queries.

@media which is added in your css file — @media screen and (max-width: 1200px) {css here}
as part of html link element — < link rel="stylesheet" href="my-style.css" media="screen and (max-width: 1200px)" / >
@import in .css — @import url(“my-style.css”) screen and (max-width: 1200px)

The @media method is probably the most common and it has the advantage of keeping all your css in a single css file. It’s likely what you’ll use most often in practice.

There are a baker’s dozen media features you can use with media queries summarized in the table below.

Feature	Definition	Accepts min/max?
width	width of display area/viewport	yes
height	height of display area/viewport	yes
device-width	width of device rendering surface	yes
device-height	height of device rendering surface	yes
orientation	portrait or landscape	no
aspect-ratio	ratio of display’s width to height (16:9, 4:3)	yes
device-aspect-ratio	ratio of device rendering surface width to height (16:9, 4:3)	yes
color	number of bits per color component of the output device	yes
color-index	number of entries in the color lookup table of the output device	yes
monochrome	number of bits per pixel in a monochrome frame buffer (0 for non-monochrome devices)	yes
resolution	resolution of the output device (pixel density; 72dpi, 300dpi)	yes
scan	progressive or scan for tv devices	no
grid	grid or bitmap (phone display with one fixed font; tty terminal)	no

In the values above viewport is defined as the part of the screen/paper where the document is rendered and includes any scrollbar. The rendering surface defines the width of the screen.

Yeah, it’s confusing to me too. Typically though you’ll target the display area or viewport.

Chaining Media Queries

As I said above we can use the “and” operator to chain queries like so:

 @media screen and (max-width: 1200px) and (orientation: landscape)

We can also use the “not” operator as in:

 @media not projection and (max-width: 1200px)

to target devices other than projection with a max-with of 1200px. The “not” operator is evaluated last so the above is evaluated as:

 @media not ( projection and (max-width: 1200px) )

There’s no specific “or” operator, but can imply “or” by using a comma.

 @media screen and (min-width: 800px) and (orientation: landscape),   @media screen and (max-width: 1200px)

The above would target both screens with a min-width of 800px in that are in landscape mode and screens with a max-width of 1200px.

The above queries aren’t necessarily those you would use in practice, but you can imagine how powerful and targeted this chaining can be.

A New Meta Tag

When Apple created mobile safari they also created a new meta tag attribute for it.

To display web pages mobile safari actually displays pages as they appear at 980px wide. It then shrinks down the page so it fits within the 320 x 480 display. The 980px is the viewport.

Other mobile browsers followed suit with the larger viewport and shrinking. We’d like things to be a little more consistent with the actual size of the device and fortunately we have the new meta tag.

 <meta name="viewport" content="width=320" />

Instead of setting an absolute viewport size we can be more flexible and set

 <meta name="viewport" content="initial-scale=1.0, width=device-width" />

The above basically sets the zoom level to 100%

Collage of browser logos

Browser Support

Browser support for media queries is generally good, though as is often the case IE took awhile to catch up. Media queries are available in IE9, but for anything below we need to do a little extra to get them work.

There are some javascript libraries Ethan recommends we use.

Both will add support for media queries to older browsers.

Why Use Media Queries

Even flexible layouts can bend or worse break. Flexible layouts can resize and accommodate a variety of width ranges, but they can still fail or simply look and work less than ideal above and below certain widths.

A different design might also be more effective on different devices. For example:

Using 3 columns on a widescreen browser, 2 columns on a tablet, and a single column on a mobile phone.
Displaying different content to different devices. Not all would agree with this idea.
Changing the proportions within a design as the size of the viewport changes.
Reining in line lengths as the browser is opened wider.
Adding or removing whitespace at different screen sizes.
Creating different visual hierarchies dependent on device and screen size.

A variety of conditions beyond the above could lead us to modify our designs based on any of the devices or features we can target.

In the simple case of screen width a good choice is to allow our designs to be flexible throughout a range or widths and then modify the design for different sets of widths.

Of course this begs the question what ranges of widths should we use? What breaking points should we set? I’ll leave the question hanging until next week when we talk more about developing a responsive design workflow.

Summary

Media Queries are a great way to target different devices and even better different characteristics of different devices. And the best part is they’re intuitive and relatively easy to use.

They take the form of media type and media query (as a feature: value pair) and through the ability to chain operators allow us to build powerful and highly targeted queries.

Through media queries we can set a variety of points over which our flexible layout might bend and serve different css to prevent those bends from breaking and causing problems for our visitors.

By combining flexible layouts and flexible images and other media with media queries we have the ability to create designs that respond to the many different ways our audience might access and view our sites.

Next week we’ll take a look at responsive design and talk generally about how we should think about building a responsive workflow.