Hello

CSS3 Media Queries

Apr 12, 2011

CSS3 Media Queries are a way of applying specific styles to a site according to the screen resolution it’s being viewed in. It’s essentially the way of the future in terms of web standards, especially with the rising popularity of mobile browsing. But, this new surge in mobile browsing is more of a rebirthing than a revolution. The mobile standard was once the ever dependable laptop. Now the mobile standard torch has passed to devices like the ipad and iphone. Ignoring all the obvious technological advances, the one true advance in mobile devices is the size. Mobile = smaller. So Media Queries is the perfect solution for such a dilema.

A lot of advances that have most recently been made with the use of CSS3, such as text-transition, are lost on platforms like the ipad (ipad’s don’t have the ability to render hover effects…yet). That leads me to believe that in dealing with the future of the mobile device, screen resolution is one of the first issues to be dealt with as far as things that directly affect your site’s appearance on multiple devices. Media Queries is by far the easiest way to deal with this issue. It also helps with problems like how someone would view your site on a nice large 1920×1080 flatscreen compared to someone sitting on their cozy 1024×768 monitor. Such a significant difference needs just as much thought as smaller resolutions like the ipad or iphone.

At work we have an upcoming project that will include a mobile version in it’s development. That inspired me to write up a little ditty on the subject.

Take a look at this example. If you resize your browser window, assuming you’re not using IE8 or below, you will see these changes take place.

Above 1200 width screen resolution, this paragraph will be red. Between 1200 and 600 it will be blue. And under 600 it will be green.

Media Queries can be handled in one of two ways, within the main CSS file like I did for my example, or you can specify a separate style sheet to be used depending on the resolution.

For my example, I used 3 media queries. One for a min-width of 1200px, one for a min width of 601px and max width of 1199px, and one for a max width of 600px. The code for these examples looks like this:

Max width of 600px will apply the style to resolutions under 600px.

@media screen and (max-width: 600px) { span#query-example { color: green; } }

This example applies the style to resolutions between 601px and 1199px.

@media screen and (min-width: 601px) and (max-width: 1199px) { span#query-example { color: blue; } }

Min width of 1200px will apply the style to resolutions over 1200px.

@media screen and (min-width: 1200px) { span#query-example { color: red; } }

But, I also could’ve handled this by putting a query in the head tag like so:

This would apply this style sheet to resolutions under 600px.

<link rel="stylesheet" media="screen and (max-width: 600px)" href="under600.css" />

As you can see, both ways are very simple to implement. There are of course other ways to handle styles for different resolutions, but media queries are by far the easiest to do and understand in my opinion. The next installment of my website, whenever that may be, I’ll most definitely be taking advantage of my new found knowledge of mobile styling.

For beautiful, more elaborate examples of Media Queries in action, pretty much the best collection of media query usage you could find, check out mediaqueri.es.