Lemieux Design

Media Query Basics

No, I’m not going to start in on the history of the @media usage in HTML. I’d rather focus instead on the practical uses of the @media property as it relates to Responsive Web Design. But first, a practical tip.

In Luke Wroblewski’s now famous Mobile First approach, we start by designing a site with the smallest screen in mind first. What that really means is that you develop all of your content in such a way that will engage mobile users who, most likely, are on devices that are on slow networks and might not be able to support all the whiz-bang that a desktop browser might be able to handle.

There are some pretty staggering statistics of mobile phone usage in third world countries. Most internet activity is achieved over mobile networks with an array of devices that aren’t that sophisticated and can’t handle most modern website features.

There’s also an important movement to improve website performance for such devices and platforms as illustrated in Scott Jehl’s new book Responsible Responsive Design. Certain design trends offer huge, full-width imagery or video. Learning what’s served best on the mobile platform is trial and error, but the basic idea is the limit the use of heavy graphics, video, and JavaScript effects for smaller devices. More importantly, the content needs to be tailored for small screens so that what’s hierarchically most important is easy to find and is most useful.

With those limitations in mind, start by building the site in a mobile view. You can resize your browser to its smallest width possible. In Firefox, you can use the Responsive Design View and choose the 320 pixel width, which will be the smallest screen size. Load up your page and start coding.

One handy tip that I learned straight away was to include all of the essential styles outside of any media query. You’ll want to establish your font sizes, colors and navigation first, working towards what will work best on the small screen. I thought that I would only put those styles into a media query that targets small screens, but that’s not the Mobile First workflow.

Once you’ve established your base styles and things in the mobile view are looking good, you can now start to resize the browser or switch to a wider layout (possibly to target Tablets).

Max and Min Width

The key components to a media query are max-width and min-width. Let’s define what those mean:

max-width Anything less than the value you have after it.

Ex.

@media screen and (max-width: 780px)

What this query is targeting is anything less than 780 pixels.

min-width Anything greater than the value you have after it.

Ex.

@media screen and (min-width: 1920px)

This targets anything greater than 1920 pixels.

It seems backwards, but this is the way that media queries work.

In Responsive Web Design, your HTML structure and CSS styles should be flexible enough that when the layout changes to accomodate different screen sizes, that the text reflows and images and videos scale. What it doesn’t account for is when layouts break. Say for example, you have a 4-column section on your site that has the bios of 4 different speakers for an event. Those columns are floated to the left and sit right next to each other in a desktop layout, but what should they do on a mobile screen? The floats should be removed so that the columns become stacked. That’s where you’ll need a media query.

Targeting and Breakpoints

The whole idea of using a Media Query is to change the layout at a certain point where it’s no longer viable on a certain device, as in the example above. When that happens, we define a breakpoint. This is your target and now you’ll need to write your media query. Following the example given, we may want to reduce the 4 columns long before we come down to a 320 pixel width. You might target anything under 480 pixels like this:

@media screen and (max-width: 480px) {
.bios { float: none; }
}

So, anything below 480 pixels and the floats are removed from the Bio section and those columns now get stacked.

See the Pen Media Query Example by Al Lemieux (@alemieux) on CodePen.

Using proportional units is best, so we can convert those pixels into ems:

480 / 16 = 30

So our media query now looks like this:

@media screen and (max-width: 30em) {
.bios { float: none; }
}

The exercise continues — resize the browser, find points that break your layout and then add breakpoints to adjust.

Base Font Size

One final consideration is base font size. We already talked about font sizes and line heights in this series. We’ve established that the base font size is 100% or 16px and the line height is 1. You can adjust the base font size up or down in your media queries. 16px body text and 36px headlines might be too large on a mobile device. You may have your base font size reduced in your body declaration to some percentage as it is comfortable to read on a small screen:

body { font-size: 70%; }

Then, in your media queries, you can increase that base font size for larger screens:

@media screen and (min-width: 80em) {
body { font-size: 90%;
}

@media screen and (min-width: 120em) {
body { font-size: 110%; }
}

I hope you’ve enjoyed this primer on media queries. We’ll get deeper into it next time, but this is a good foundation and is common practice these days. Be sure to check out the other articles in this series:

• RWD – Browser Tools for Responsive Design
• RWD – Typography The Almighty EM
• RWD – Vertical Rhythm Part 1
• RWD – Vertical Rhythm Part 2