Query Your Media with Media Queries

A couple days ago I blogged about the viewport meta tag. It is a handy little meta tag for your mobile sites, for sure. For installment 3 of 7,867,543 on mobile web development, the next natural step is to talk about media queries.

Of course, if you are not familiar with them you are probably asking yourself, “what are media queries”? Fine question. First of all, “media” here refers to the thing you are viewing the content with. Once example is “screen”, which is what you would use to target a phone (and the only media I have used these with media queries). Okay, so you get to target your phone. Big deal. Well, fortunately, you also get to target particular properties of your phone, like its height, width, orientation, resolution et al. I end up just using width pretty much all the time, but your needs may vary. What media queries allow you to do is target a chunk of css for a device as long as it meets particular media requirements.

So maybe we should say this another way. Media queries allow you to customize the css of a website for a device easily. We have been able to do this for quite some time; it has just been annoying. An example is in order at this point. Here is one I wrote just a couple hours ago:

@media screen and (max-width: 320px)
{
  #content
  {
	padding: 20px;
  }
  p
  {
    font-size: 1.4em;
    line-height: 1.2em;
  }
}

Line 1 says “as long as this is a screen viewing the page and as long as its width is less than 320px, apply this css.” In this case I was decreasing the padding for all the content, lowering the font size and shrinking the line spacing. You could also specify a range like so:

@media screen and (min-width: 321px) and (max-width: 480px)
{
	/* normal css goes here */
}

That media query will apply all the contained to any screen between 321 and 480 pixels wide, so it could be used for styling many phones in landscape mode.

External Style Sheets

These media queries can also be used to selectively apply whole stylesheets. Behold:

<link rel="stylesheet" type="text/css"
  media="screen and (max-width: 320px)"
  href="awesome.css" />

If you were to try this in chrome, you would find that though the stylesheet is loaded regardless of screen width, the css in it will only be applied if the media query resolves to true. Sweeeeeet.

Support

Support for media queries these days is actually quite good in recent browsers. It has been supported in at least four versions of Firefox and Chrome, at least since iOS 3.2, at least since Android 2.1 and IE 9. As you would probably expect, IE is the problem here.

Fortunately for you, there is a polyfill to shim this functionality into older versions of IE called Respond. It works for IE 6-8 (and perhaps other older browsers as well). I haven’t tried it but I do not imagine they are lying, especially since I’ve heard of a number of people using it.

In the mobile world, support for this is really good, as long as we are talking about modern phones like iPhone, Android and WP7 (well...as far as I know not the first version of WP7). For many older phones you are likely going to be entirely out of luck unless the mobile phone uses Opera mobile, which has had support for quite some time. In those older phones you will have to go a different route entirely, but that is a discussion for another day.

By the way, css media queries work well for tablets too. Your iPad, Kindle Fire or Android tablet all respond to media queries, so use them if it makes sense.

What Would You Use This For?

So what would you use this for? It can be applied to anything really but there are some very common use cases. Perhaps your text is too big or small when your site is viewed on a mobile browsers. Use a media query to change that for a certain range of devices. Perhaps the header graphic is too wide to fit on a mobile device. Fine. Remove it, or replace it with another. Or perhaps that three-column layout won’t work on your phone (it won’t). Nuke the floats (hopefully you were not using tables for layout) and move to a taller, one-column layout for mobile.

How about you see for yourself? Go to the Media Queries website (http://mediaqueri.es/) and try out the examples it has. Visit the example site, resize your browser and see the magic happen. This site as well as my home page also use media queries.

Next

If you are up on your web design trends, you will already have noticed that we have been covering some of the basic ideas in “Responsive Web Design.” In the next post, we will dig into this more.