You’ve seen this responsive web business, yes? If you’re not sure of what I’m talking about, grab the side of your browser window and make it as narrow as you can. Yes, this article. See how everything adjusted with the window width, and when it got past a certain point the header snapped up into mobile mode? That is that responsive web business. And one of the key players in the business are our friends, the media queries.

Put simply, media queries allow us to use conditional rules for displaying CSS rules at different states of the document. Here’s a real-world example of how they work in mobile-first development:

Mobile First With Media Queries

We begin by setting our universal rules, and we always want our container class to have a little padding around it. We always want it to be center-adjusted, so we set our margin:auto for the sides, and if the element is not already set to display:block we do that to ensure the margin will work. Universally, we always want to make sure that the container fills as much of the screen as possible, so we set our width:100%.

These are the rules that are always in play.

Then we begin introducing size-specific rules, we want our container class to have a locked width in different sizes. Instead of over-riding the width call made universally, we use media queries with max-width at various window sizes to lock the container’s width at certain points. These widths, 480, 768 and 960, are commonly used generic sizes to differentiate between large mobile, tablet and desktop sizes (respectively). Some even go nuts beyond 1200, super-size targets for modern larger displays.

This approach is called mobile first, where we gradually roll out changes as the size increases, but we can also do the exact opposite:

Desktop Down With Media Queries

This time, we are starting with our traditional full width, and use max-width rules in our media queries to define sizes down to mobile. Personally, I am a fan of mobile first if I’m doing a build from scratch.

However, this method can be particularly useful if you are building a mobile version of an existing fixed-width website (although these are becoming rarer). Using max-width:980px in a new section of CSS, after your main styles, will allow you to build new rules for mobile sizes while retaining the existing rules.

You can also combine different conditions into a rule set. For example, if you wanted to define rules for an element that only apply in the large mobile size, specifically between 480 and 768, you want something that looks more like this:

Mixing Features In Media Queries

In this example, we have a hard-boiled width rule in place on our .container class, and with the !important call this should over-ride any other width rules that have been assigned. And it will, provided that the screen on the device is between 400 and 768 pixels wide. Any larger or smaller than the defined range, the rules are ignored.

Going Deeper Down the Rabbit Hole

The extreme majority of the time, I use media queries in adjust various elements according to the display size, but this is only scratching the surface of what you can do with them. The examples I’ve shown are for the media type screen, other media types include print and speech (for screenreaders that convert content into audio).

Media features that you can target go beyond min-width and max-height, you can use aspect-ratio, color-index, resolution, orientation, and many many more. Most have min- and max- settings, allowing you to finely tune the rules in your experience.

Media Queries and Stylesheets

Instead of just defining a few rules, we can even bring in entirely different stylesheets using media queries. This example allows us to have an entirely separate CSS file that we bring in for tablet sizes and up, but consider this with the versatility of the options we’ve shown. Monochromatic displays? No problem, we’ve taken that into account given our previously-scoped factors and have provided a stylesheet that would only be brought in for that purpose.

Learning By Doing

To really wrap your head around media queries, I’d recommend getting a demo going in a framework like Foundation, Gumby or Bootstrap. Then, using a “solid” browser such as Chrome or Firefox, use the developer tools to look at the structure.

The easiest pieces to see in action will be the header and the grid system. Likely, there will be a main navigation that, in smaller sizes, will fold up into a hidden drawer that then opens when you click “the happy sandwich”. There will likely be a sidebar accompanying the main content, in smaller sizes this should drop to below the main content.

All of this is accomplished through media queries, and with the demo and your browser’s inspector, look at the elements as the size changes. When are the floats being introduced? How are those rules written?

Once you understand how these principles work in a breathing build, a fun challenge is to create your own responsive grid system. Columns, variable widths, offsets, methods of clearing floats. Introduce your own utility classes for showing and hiding elements at various sizes. Impressive though they are, those big polished frameworks are still just collections of rules.

Media queries are awesome, they allow us flexibility to build any combination of responsive layouts that we can envision. If you can imagine the dimensions and how structural elements need to behave at those sizes, you can provide rules that target those sizes. They are pretty much a nitpicking perfectionist’s dream come true.