Customizing Responsive WordPress Themes: Media Queries

In this 4th part of the series on “How to Customize Responsive WordPress Themes”, we’re going to take a closer look at media queries, and see how they work their magic in responsive WordPress themes. And don’t worry; it’s really not as complicated as you might think. On the contrary, as powerful and flexible as media queries may be, they’re actually very simple.

Before we continue, note that although media queries can be used in languages other than CSS, such as JavaScript, this article only concerns their use in your style-sheets. Also, while there are several types of devices that can be specified using the @media rule, we’ll only be looking at the screen media type here to keep things simple (for more on media types, see http://www.w3.org/TR/CSS21/media.html).

A simple example

A media query is an expression that will instruct a specific type of device to display your content in a particular manner depending on conditions that you define.

A media query has a logical construction, or syntax, that must specify the type of media concerned, and can include one or more features that apply to that media type. Let’s take a look at a simple example:

@media screen and (min-width: 768px) and (max-width: 979px) { ... }

• The query opens with: @media. That’s a pretty obvious notification to devices saying “Hang on media thingy, check if these conditions apply to you“.
• It then specifies the device type that is concerned by the query; in this case: screen. So, any device that does not display content on a screen will ignore the query and continue on its merry way.
• The logical keyword and indicates that the condition immediately following it must also apply.
• We then see 2 conditions in this rule: (min-width: 768px) and (max-width: 979px). That identifies devices with a viewport size anywhere between 768 and 979 pixels.
• Finally, there are those brackets: { … }. They will contain the style rules that must be applied if the conditions specified by the media query are met.

Putting it all together, this simple query states that any device with a screen whose viewport size is between 768 and 979 pixels must respect all the styles contained in the curly brackets. Devices with a screen width that is less than 768px or greater than 979px will ignore this query. Any device that doesn’t directly display content on a screen will also ignore it (print or projection devices for example).

Adding your media-specific styles

Now let’s take a closer look at those curly brackets that enclose the media-specific styles. They are identical to the brackets you normally use when writing your style rules, and they must wrap all the style rules that apply to the media query. Just write your style rules as you normally do inside those extra brackets. Here’s an example of a simple style-sheet with a default margin value applied to a div container, and a lesser value that would apply only to screen devices with a viewport width of 767px or less.

/* Default styles */
div#main { margin:40px; padding:20px; }

/* Phones to tablets 767px and below */
@media screen and (max-width: 767px) {
div#main { margin:20px; }
}

Note that is not necessary to define everything in your media queries. Media queries respect the cascade principles of CSS. That means that any default style rules that are not explicitly overridden by a media query will also apply to device types targeted by that particular media query. In the above example, the padding has not been explicitly defined in the media query. Device types targeted by that media query will, therefore, inherit the value defined in the default styles.

The above example demonstrates the use of the logical keyword and. There are 3 other logic elements that can also be used in your media queries.

• A comma represents a logical OR
• The keyword not can be used to negate the result of the query
• The keyword only can be useful to hide stuff from older browsers

See examples 6, 8 and 9 on this page at W3.org for more.

Adapting a design to all screen sizes

Great! So we’ve now created a style-sheet and have included a media query that will apply different styles to smaller screens. But we know that there are more screen sizes than the ones we just created styles for. So what if we wanted to create a design that would adapt to all screen sizes?

You can have several media queries in the same style-sheet to define specific style rules for different conditions. If we want to define some style rules for all screen devices, from cellphones to large wall-mounted monitors, we could include all those queries in our style-sheet like in the example below.

/* Default styles */
div#main { margin:40px; padding:20px; }

/* Large display 1200px and above */
@media screen and (min-width: 1200px) {
div#main { margin:50px; }
}

/* Portrait tablets 768px and above */
@media screen and (min-width: 768px) and (max-width: 979px) {
div#main { margin:30px; }
}

/* Phones to tablets 767px and below */
@media screen and (max-width: 767px) {
div#main { margin:20px; }
}

/* Phones 480px and below */
@media screen and (max-width: 480px) {
div#main { margin:10px; }
}

In the above example, you can see that there is no specific media query for screen devices with a viewport width that is between 980 and 1199px. That’s because we are considering that size range as our default size. All style-rules that are not contained in media queries will be our default styles, and will apply to all screen devices that fall into that size range.

When you have a relatively simple WordPress theme with a relatively simple design (like Twenty-Twelve for example), you can get away with adding all your media queries in the same style-sheet. But what about when you’ve got a boat-load of styling to do for each media type, or want to organize things in different style-sheets?

Using multiple style-sheets

Happy days! Media queries can also be used to specify individual style-sheets that must be used only for specific media types and/or conditions. So you can have one style-sheet for your default styles, and another for your responsive stuff. Once you’ve created your style-sheets, there are 2 ways that you can call them (use only one or the other, not both, or things will likely get screwy on your site).

You can call your responsive style-sheet conditionally from within your default style-sheet using the @import rule. You simply need to append the media query conditions to a normal @import rule. So instead of this (which would load the responsive style-sheet regardless of the device):

@import url(responsive.css);

…you can use this (which only loads the responsive style-sheet if either of the 2 conditions are met):

@import url(responsive.css) screen and (max-width: 979px), screen and (min-width: 1200px) ;

The 2nd example above demonstrates the use of the comma as a logical OR. So the responsive style-sheet will only be loaded for screen widths less than 980px, OR greater than 1200px.

However, according to Google, there is a drawback to calling additional style-sheets from within the default one using the @import rule: page load time. The browser must first download, parse and execute the default style-sheet before it even realizes that it must also load the responsive one. There is an alternative, and faster way.

Load your style-sheets in parallel in your theme’s header.php file using <link> tags. You’ve surely noticed how a style-sheet can be loaded from the header in a WordPress theme; something like this:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); >" />

You can specify different style-sheets, like your responsive one, that should load only under specific conditions using a media query directly in the link. Here’s what that might look like using the same conditions specified in the previous example (this assumes that the responsive style-sheet is in the root of the theme):

<link rel="stylesheet" type="text/css" media="screen and (max-width: 979px), screen and (min-width: 1200px)" href="><?php echo get_template_directory_uri(); ?>/responsive.css">

Wrapping things up

We’ve seen how easy it actually is to write a media query, and how to use them in a style-sheet. We’ve also seen how to call external style-sheets using media queries. The next article in this series will cover a few things to look out for when creating your styles for various media types or conditions.

In the meantime, get out your Twenty-Twelve child-theme (you did make one, didn’t you?) and play around a bit with the responsive styles beginning on line 1351. You may also want to review Part 2 and Part 3 of this series while you’re at it :)

Additional resources to check out

• Screen sizes referred to in this article are borrowed from Bootstrap Scaffolding
• Use as few style-sheets as necessary as recommended by Google Best Practices.
• Avoid the @import rule and link your style-sheets in the header for faster load times as recommended by Google.
• The complete specs on media types and media queries from W3.org.

Tags:

• design
• responsive