Responsive Web Design: Working With CSS3 Media Queries

In my previous post, I took you through the basic steps to create a fluid grid. And while this responsive site does grow and shrink depending on your browser’s window size, it’s not quite complete. The second component of responsive web design is CSS3 media queries. As explained by the W3C, “A media query consists of a media type and zero or more expressions that check for the conditions of particular media features.” In this case, the use of media queries would ensure that any visitor to our site would get the most out of his or her screen resolution.

Right now, if you shrink your browser window as small as it will get, you will notice the sidebar becomes incredibly thin. And while thin may be a good thing if you’re planning on buying the new iPhone, we don’t want our sidebar to be that skinny. Why? Well, imagine if there was actually content in the sidebar. It would not be easy to read in that small space. For example, on my iPhone (sadly, not the new iPhone), the sidebar is only 126 pixels in landscape orientation and 84 pixels wide in portrait. It would be a much better visual experience if we could drop the sidebar below the content so they could each have 100% of the screen at these small resolutions. Bring on the media queries.

In order to drop the sidebar, we’ll need a media query that detects if the device width is a minimum of 320px (portrait) and a maximum of 480px (landscape). Chris Coyier provides a nice snippet for us:

[code language=”css”]
/* Smartphones (portrait and landscape) ———– */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
[/code]

Of course, this is a very simple example. We can take this a step further and not only detect device width, but detect screen width in general:

[code language=”css”]
@media (max-width : 600px) {
/* Styles */
}
[/code]

Now if you navigate back to our site (if you’re in Chrome like me, you may need to clear your cache) and shrink your browser window, you’ll notice that once the screen gets smaller than 600px, the sidebar will drop below the content and take up 100% of the window. In this case, all I did was take away the float on both the content and sidebar as well as give them a 100% width.

As you can see, media queries are essential in creating a responsive web site. Today, I’ve only scratched the surface of what queries are capable of. We could also create queries that check for tablet resolutions or even those amazing resolutions of retina displays produced by Apple. I encourage you to research and experiment for yourself. Next time, we’ll complete our responsive web design trilogy with fluid images.