Question

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 1

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.