Blog

Simple media query usage for responsive CSS designs

December 13th, 2012

With today’s variety of browsers and means of viewing the web, it’s important to ensure that your web projects are capable of being displayed on the biggest amount platforms you can reasonably support. However, there is one more factor in the viewing experience of web projects that is becoming more and more prevalent on a daily basis. Most notably, low-resolution devices such as netbooks, ultra-portable laptops, and touchscreen tablets, are becoming an increasingly large percentage of the devices used for accessing the web on a regular basis.

As a result of this, the usual canons of web design and layout, may not be effective in scaling to meet the needs of these smaller screen spaces. However, available in the modern web development arsenal, there are simple, CSS-driven methods allowing you to dynamically scale and organize content in reaction to the device viewing it. These are known as CSS Media Queries, and can allow you to dynamically apply variations or new CSS styles to content based on the width, height, or color of device or screen area that is currently in use.

While there are many different cases these can be used for, let’s take a look at the most frequently needed one: Screen width.

 
Example 1.

@media screen and (max-width: 1000px) {

#yourID {display:block;}

.yourClass {display:block;}

}

 

Here we see an example of a query that is specifically targeted at screen sizes (browser window size) 1000 pixels in width, or less. This means, that if the user scales the window down to a size, smaller than 1000 pixels across, the associated ID’s, classes, or statements contained within, will be implemented, or replace their existing definitions in the main part of the stylesheet.

 

Example 2.

@media screen and (min-width: 1000px) { … }

 

Now, if you want your layout to respond to 1000 pixel and larger devices, you can simply change the definition from max to min, to ensure that only beyond your specified resolution, does your extra CSS get loaded.

 

Example 3.

@media screen and (max-device-width: 1000px) { … }

 

In this example, you may have noticed how “device” has been added to the definition of the width attribute. This is to target the CSS contained within to be loaded when the device screen, regardless of browser window dimensions, is 1000 pixels in width, or less. This is very handy for mobile devices in particular, as their on-board browsers rarely allow for windowed usage modes, and allows you to target the layout based on each devices native resolution, each tied to it’s own query.

 

Notes when using CSS media queries:

A. They are sensitive to load order. If placing the queries within your main stylesheet, be sure to place all queries at the end, to ensure proper replacment/override behavior. Or, if queries are in a separate stylesheet, ensure that they are loaded after the master stylesheet in your pages header. (ex. 4)

 

Example 4.

<link rel=”stylesheet” href=”main.css” />

<link rel=”stylesheet” href=”mediaqueries.css” />

 

B. If you are designing for modern browsers/devices, you may be using a fair amount of CSS3 in your styling code. While definitely a great part of any rich web user experience, animations in CSS3 may cause problems when transitioning between media queries, as it can attempt to animate the transition, resulting in an undesirable “shuffling” behavior in the overall box model of the page. Depending on what your needs are, you may simply want to disable these animations/transitions above or below certain resolutions, at which point, simply reset all animations and transitions to none, or null values within your query.

Otherwise, for a more consistent experience, you can use jQuery to target the affected objects, and temporarily disable these transitions. (ex. 5)

Example 5.

$(document).ready(function() {

window.resizeEvt;
$(window).resize(function() {
$(‘.myClass’).css(‘-webkit-transition’,'none’);
clearTimeout(window.resizeEvt);
window.resizeEvt = setTimeout(function()
{
$(‘.myClass’).css(‘-webkit-transition’,’0.5s’);
}, 250);
});
});

 

This example, upon the window being resized, will disable all transitions applied to “.myClass”, and after a 250 millisecond delay (expected amount of time for user to scale the window, this can be adjusted to preference) will return the attributes to their original values.

 

In closing, as you can see, with a little extra CSS and a simple media query, you can quite easily convert your website or web software into a flexible, cross-platform, cross-device  application or experience, without the time and effort investment of building  a unique UI for each. An extremely useful time-saver for any front end developer, and a testament to the power of the responsive web.