Responsive website design increases to become a trend across designers and developers bringing with it simpler ways to achieve what was originally very complex.

The fundamental concepts of responsive design use media queries to determine the viewing device type, its orientation, width, height, resolution, aspect ratio and much more. Knowing all these details about the device itself in our stylesheet allows us to control how we display the site for different devices.

Using the matchMedia API

Using Javascript, it’s possible to respond to CSS3 media query state changes using the window.matchMedia HTML5 API. We pass the API a media query string identical to how we handle it in CSS.

// We want to test if the device is at least 960px wide
var mq = window.matchMedia( "(min-width: 960px)" );

With our query setup we now have a 'matches' property which will either be true or false:

if(mq.matches) {
    // Window is at least 960px
} else {
    // Window is smaller than 960px wide

We can extend this another step and add event listeners that'll match when the media query changes; say the browser is resize.

function onWidthChange(mq) {
    if(mq.matches) {
        // ...
    } else {
        // ...
// First off, check we support the 'matchMedia' API
if(window.matchMedia) {
    var mq = window.matchMedia("(min-width: 960px)");
    // Listen for dimension changes
    // As soon as the window loads, fire it off

Currently the matchMedia API is a draft specification and it's likely changes will occur down the line, though I don't imagine they'll be too drastic. The API is currently supported by Firefox and Chrome, Safari and IE10 upwards. Support:

Fallback Support with Enquire.js

If you want to support older browsers such as IE8 or IE9, you can implement Enquire.js which has a nifty set of functions that'll handle the overhead of the media queries for you.

In Enquire.js we need to register and hookup our media queries and all relevant callbacks that we define as configuration options.

enquire.register("screen and (min-width: 960px)", {
    // Required - This is triggered when the media query state changes from unmatched to matched
    match: function() {},
    // Optional - This is triggered when the query state changes from matched to unmatched   
     unmatch: function() {},    
    // Optional - This is triggered as soon as we register the media query
    setup: function() {},      
    // Optional - If true, defers execution of the setup function until the first media query is matched and only executes it at maximum once
    deferSetup : true           

So if we combine this with jQuery we can put together more complex queries for older browsers. In our example, we're going to add a 'small' class for mobile and 'large' for everything else. We will add these classes to the body, main header and our navigation (just some examples).

$(document).ready(function() {
    // cache body for speed
    var $reduceElements = $("body, header.pageHeader, nav.pageNavigation");
     * mediaQueryResponse: This sets up the Enquire.js callback and the functions we need. We just want to take the className as a parameter and then either add it to the body or remove it. We can then use standard CSS to match different conditions.
    function mediaQueryResponse(className) {
        return {
                  match : function() {
                  unmatch : function() {
    // Register the media queries through Enquire.js
            .register("screen and (max-width : 320px)", mediaQueryResponse("mobile"))
            .register("screen and (min-width : 321px)", mediaQueryResponse("desktop"))
            .listen(1000); // Default this is 500ms, make it 1000ms
Ignite your brand, utilise user-generated content no matter where you or your audience are ›