Andrew Gormley

So, when you write:

The browser understands that to mean:

“all” is the media type the browser will default to when one is not explicitly defined. There are a few media types you can define to narrow the scope of your query before you even begin looking at things like width or orientation, the most common are:

• screen
• projection
• print
• handheld
• speech

Most of the properties that you query after optionally declaring one of the media types above have a min- and max- prefix you can use to specify a range as opposed to an exact value. In fact, I don’t think I’ve ever used just width or just height in a media query at all. Here are a list of the most common properties:

• width
• height
• device-width
• device-height
• orientation
• aspect-ratio
• device-aspect-ratio

With the exception of orientation, aspect-ratio, and device-aspect-ratio, you can prefix all of those media queries with min- or max- as I’ve stated above. The difference between width and height and their respective device- counterparts are that when you query just the width or the height, you’re getting the current size of the browser, when you query the device-width or device-height you’re getting the current resolution of the entire screen. As is often the case (unless you maximize all of your windows), your browser width might only be 1200px while you have a device-width of 2560px.

When querying something like device-aspect-ratio, using the lowest common denominator will apply to the widest devices. For instance, if you used the very common 16:9, you’d cover devices that are 1280:720, 1920:1080, etc. The syntax for (device-)aspect-ratio looks like this:

Square desktop displays and devices like the iPad use a 4:3 ratio. Most laptops with high resolution screens utilize a 16:10 display. It’s up to you to determine whether it’s best to target aspect ratios or use a combination of widths and heights.

There’s also a special media query you can use to target just the iPhone 4. It looks like this:

Because the resolution of the iPhone 4 is so high (each pixel is literally half its visual size), you can specify this media query and adjust properties like swapping higher resolution icons or images, adjusting text-shadow, etc.

Those are just a handful of the most common media queries available to us. I hope this info coupled with what I’ve run through in the screencast help you quickly and easily transition your websites to become more responsive.