Skip to main content

Respond.js

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs in browsers that don’t support CSS3 Media Queries - in particular, Internet Explorer 8 and under. It’s written in such a way that it will probably patch support for other non-supporting browsers as well (more information on that soon).

If you’re unfamiliar with the concepts surrounding Responsive Web Design, you can read up here and also here

Demo page (the colors change to show media queries working)

Usage Instructions

  1. Craft your CSS with min/max-width media queries to adapt your layout from mobile (first) all the way up to desktop
    @media screen and (min-width: 480px){
        ...styles for 480px and up go here
    }

  1. Reference the respond.min.js script (1kb min/gzipped) after all of your CSS (the earlier it runs, the greater chance IE users will not see a flash of un-media’d content)

  2. Crack open Internet Explorer and pump fists in delight

CDN/X-Domain Setup

Respond.js works by requesting a pristine copy of your CSS via AJAX, so if you host your stylesheets on a CDN (or a subdomain), you’ll need to upload a proxy page to enable cross-domain communication.

See cross-domain/example.html for a demo:

	<!-- Respond.js proxy on external server -->
	<link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />

	<!-- Respond.js redirect location on local server -->
	<link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />

	<!-- Respond.js proxy script on local server -->
	<script src="/path/to/respond.proxy.js"></script>

If you are having problems with the cross-domain setup, make sure respond-proxy.html does not have a query string appended to it.

Note: HUGE thanks to @doctyper for the contributions in the cross-domain proxy!

Support & Caveats

Some notes to keep in mind:

How’s it work?

Basically, the script loops through the CSS referenced in the page and runs a regular expression or two on their contents to find media queries and their associated blocks of CSS. In Internet Explorer, the content of the stylesheet is impossible to retrieve in its pre-parsed state (which in IE 8-, means its media queries are removed from the text), so Respond.js re-requests the CSS files using Ajax and parses the text response from there. Be sure to configure your CSS files’ caching properly so that this re-request doesn’t actually go to the server, hitting your browser cache instead.

From there, each media query block is appended to the head in order via style elements, and those style elements are enabled and disabled (read: appended and removed from the DOM) depending on how their min/max width compares with the browser width. The media attribute on the style elements will match that of the query in the CSS, so it could be “screen”, “projector”, or whatever you want. Any relative paths contained in the CSS will be prefixed by their stylesheet’s href, so image paths will direct to their proper destination

API Options?

Sure, a couple:

Alternatives to this script

This isn’t the only CSS3 Media Query polyfill script out there; but it damn well may be the fastest.

If you’re looking for more robust CSS3 Media Query support, you might check out http://code.google.com/p/css3-mediaqueries-js/. In testing, I’ve found that script to be noticeably slow when rendering complex responsive designs (both in filesize and performance), but it really does support a lot more media query features than this script. Big hat tip to the authors! :)