Respond.js

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

• Copyright 2011: Scott Jehl, scottjehl.com
• Dual licensed under the MIT or GPL Version 2 licenses.

 

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 um-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:

• Upload cross-domain/respond-proxy.html to your external domain
• Upload cross-domain/respond.proxy.gif to your origin domain
• Reference the file(s) via <link /> element(s):

    <!-- 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>

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

 

Download