Download
Respond.js is 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. If there's one thing that can compete with lightboxes for world's most done-to-death jQuery plugin, it's carousels. However, everything I came across was using pixel values and not percentages meaning I wasn't finding much of anything that could be used on a responsive/flexible layout. This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer, as well as default HTML5 styling in Internet Explorer 6 - 9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.
Features
- Craft your CSS with min/max-width media queries to adapt your layout from mobile all the way up to desktop
- 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
- This script relies on no other scripts or frameworks (aside from the included matchMedia polyfill)
- Respond.js doesn't parse CSS referenced via @import, nor does it work with media queries within style elements
- Currently, media attributes on link elements are supported, but only if the linked stylesheet contains no media queries
Project Samples
