css3-mediaqueries.js VS respond.js

Giona picture Giona · Oct 11, 2012 · Viewed 22.8k times · Source

respond.js or css3-mediaqueries.js ?

The official documentation, especially that of css3-mediaqueries.js, is sparse. Reading on SO, forums and blogs I have summarized these pros and cons.

respond.js

Pros:

  1. More reliable (? recommended by Modernizr , Twitter Bootstrap 3 and H5BP )
  2. Lighter (4kb) and faster
  3. Interpret mediaquery in any context (<link>, inline CSS, @import-ed CSS)

Cons:

  1. Doesn't update on window resize
  2. Supports only min-width and max-width
  3. Doesn't support em units (huge weak point!)

css3-mediaqueries.js

Pros:

  1. Reacts in real time (on resize too!)
  2. Supports em units (really? anyone tested it?)

Cons:

  1. Heavier (15kb) and slower
  2. Interpret only inline CSS with a explicitly declared media-type
  3. Lacks detailed documentation and the project seems abandoned

Does anyone have points to add to the list, or personal experiences to share, or a particular preference for one or the other script? If so, why?

Answer

Giona picture Giona · Oct 25, 2012

I created a test page, including Mediatizr too.

If anyone is interested, here's the test page, and these are the results (tested on IE8 and IE7).


css3-mediaqueries.js

Pros

  1. Supports min, max and min+max mediaqueries
  2. Supports px and em values
  3. Reacts on window resize
  4. Elaborates on-page CSS (<style>) and external stylesheets

Cons

  1. Doesn't support width mediaquery
  2. Doesn't elaborate <link media="screen and ..."> nor @imported stylesheet

respond.js

Pros

  1. Supports min, max and min+max mediaqueries
  2. Supports px and em values
  3. Reacts on window resize
  4. Elaborates external stylesheets only

Cons

  1. Doesn't support width mediaquery
  2. Doesn't elaborate on-page CSS, <link media="screen and ..."> nor @imported stylesheets
  3. It may cause a javascript error when combined with jQuery on load events, to solve it you need to place the script at the end of the page

mediatizr.js

Simply..doesn't work


In the end I opted for css-mediaqueries.js, conditionally loaded with Modernizr.