Different Stylesheets for Differently Sized Browser Windows

Otherwise known as "resolution dependent layouts". Single website, different CSS files for rearranging a website to take advantage of the size available.

There is a W3C standard way of declaring them. One way is to test the "device-width", like this:

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

The above code will apply the 800.css styling to the document only if the device viewing it has a width of 800px or wider. And... supports "media queries" in this way.

Keep in mind this is the device width, not the current width of the browser window. On the iPhone (3G(s)), that means 480px. My fancy new MacBook Pro is going to return 1920px for the device width. But my actual browser window is only half of that at this exact moment. The device width is quite useful when dealing with mobile devices where the browser is probably 100% of the screen whenever in use, but less useful in laptop/desktop browsers.

Seems to me far more useful is the current width of the browser window ("viewport"). We can even specify stylesheets that are only to be used when the viewport is between two different pixel sizes:

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

That stylesheet will only take affect when the current browser window is between 701 and 900 pixels in width.

Browser Support

IE 9+, Firefox 3.6+, Safari 3+, Any Chrome, Opera 10+. Mozilla suggests starting the media attribute of the <link /> with "only" which will hide the stylesheet from older browsers that don't support media queries. That may or may not be what you actually want to do... case dependent of course.

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

Generally, layout is one of those things that it's tough to sell "progressive enhancement" on. Rounded corners becoming squares, no big deal. Messed up layout, that is a big deal. Devices like the iPhone right now are kind of great, since browser choice is so limited (there used to be just Mobile Safari and that's it, now there is Opera as well) and they are very good browsers, you can rely on techniques like this to work.

If IE support is paramount, we always have JavaScript!

Doing it with jQuery

Using JavaScript, we can test the windows width and change the active CSS file accordingly. This will work across all browsers. You can have an ID for a <link /> element like any other, so let's add that:

<link rel="stylesheet" type="text/css" href="main.css" />
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="narrow.css" />

Then we can use that as a hook and change the href value of the stylesheet. The browser will see that change and unapply the old CSS and reapply the newly linked CSS. We'll run our little adjustment test once right away, and then anytime the window is resized thereafter.

function adjustStyle(width) {
    width = parseInt(width);
    if (width < 701) {
        $("#size-stylesheet").attr("href", "css/narrow.css");
    } else if ((width >= 701) && (width < 900)) {
        $("#size-stylesheet").attr("href", "css/medium.css");
    } else {
       $("#size-stylesheet").attr("href", "css/wide.css"); 
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

Is jQuery really necessary just for this?

No, but I'm sure you know that's just how I roll in general and it makes it easier. Kevin Hale wrote about dynamic resolution layouts literally five years ago. It's "raw" JavaScript and still works great today.

Also, there is a kick ass polyfill: Respond.js

Example One

This one has a special stylesheet for narrow (less than 700px), medium (701 - 900px), and wide (greater than 901px) browser windows.

View Demo

Example Two

This does the exact same thing as example one, only through jQuery/JavaScript instead of CSS media queries.

View Demo

Example Three

This example shows that we can target mobile devices by testing for a maximum device width.

View Demo

Download

Snag all of these for reference in one place.

Download Files