Media Queries

To recap, if we want to apply some CSS solely to screen-based media, for example, one option would be to slot something like the following in at the bottom of a stylesheet:

@media screen {

    body { font: 12px arial, sans-serif }
    #nav { display: block }

}

Browser-size specific CSS

To extend the previous example, not only can screen-based media be targeted, screen-based media of a certain size can be targeted as well:

@media screen and (max-width: 1000px) {

    #content { width: 100% }

}

This is telling a browser to apply a block of CSS when its viewport is 1000 pixels wide or less. You could use this to do something as simple as making a content area or navigation narrower or you could completely re-arrange a page layout (like stacking page sections on top of one another instead of displaying them in columns).

You can apply more than one @media rule, so you could have a number of different designs that are browser size dependent:

@media screen and (max-width: 1000px) {

    #content { width: 100% }

}

@media screen and (max-width: 800px) {

    #nav { float: none }

}

@media screen and (max-width: 600px) {

    #content aside {
        float: none;
        display: block;
    }

}

Note that if, for example, a layout area was 600 pixels wide or less, all three of these would be applied (because it would be less than or equal to 1000px, 800px, and 600px).

You could also use “min-width” in place of “max-width” if you want to do things the other way around and apply CSS to sizes equal to or over a certain length.

Orientation-specific CSS

If you have a hankering for applying CSS depending on the orientation of the browser, fill your boots with something like the following:

@media screen and (orientation: landscape) {

    #nav { float: left }

}

@media screen and (orientation: portrait) {

    #nav { float: none }

}

This could be especially useful with mobile devices…

Device-specific CSS

We’re not talking different CSS for each and every brand and model of laptop, phone, and donkey - that would be sinful - but we can, with a relatively clear conscience (as long as we’re sensible), specify the likes of the device’s screen dimensions and its pixel ratio.

Width and height

device-width, device-height, min-device-width, max-device-width, min-device-height and max-device-height can be used to target the computed resolution of a device:

@media screen and (min-device-height: 768px) and (max-device-width: 1024px) {

    /* You can apply numerous conditions separated by "and" */

}

Pixel ratio

It’s important to keep in mind that a CSS pixel need not be the same as a physical pixel. While a screen may physically be 720 pixels wide, a browser may actually apply CSS assuming that it is 480 pixels wide, for example. This is so that a standard designed web page will more likely fit on the screen. In this example, there is a pixel ratio of 1.5:1: There are 1½ physical pixels to every CSS pixel. A bog-standard desktop monitor will have a pixel ratio of 1:1: One CSS pixel to every physical pixel.

If you want to apply styles only to these devices, you can use something like:

@media (device-pixel-ratio: 2) {

    body { background: url(twiceasbig.png) }

}

This would apply to the likes of the iPhone (4 and above), with a pixel ratio of 2:1. You can also use min-device-pixel-ratio and max-device-pixel-ratio.

Others

You can also apply styles depending on a device’s resolution:

@media screen and (resolution: 326dpi) { /* */ }

@media screen and (min-resolution: 96dpi) { /* */ }

Or on its aspect ratio:

@media screen and (device-aspect-ratio: 16/9) { /* */ }