How To Use Media Queries For Device Targeting

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.

Old mobile phones on a stack of advertisements

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.

1
<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.

Screen shot of Simon Collison's responsive design from MediaQueries.es

Media Queries

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

1
2
3
@media screen and (max-width: 1200px) {
  css here
}

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:

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

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

1
@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:

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

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

1
2
@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.

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

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

1
<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.

iPad

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.

Download a free sample from my book, Design Fundamentals.

9 comments

    • Glad I could help provide some of that insight Pablinho. I’ll recommend again Ethan Marcotte’s book. It’ll provide more insight into everything responsive design than I could hope to give.

    • Glad you liked the post. Funny, I thought I had linked to the mediaqueri.es site, but I guess I didn’t. I know I did in next week’s post looking at responsive design. It is a great site. I often go to it and see what new sites have been added.

  1. Just when I was thinking how to implement it, and from where to start learning, I bumped into this article. Thanks for great summary :)

  2. Great posts, easy to follow and implement! I was wondering when the next one on responsive design will be. Thanks!

    • Thanks Marjorie. I don’t have another post on responsive design planned for the immediate future, but I’m sure I’ll write more about it as I use it more in practice.

Leave a Reply

Your email address will not be published.

css.php