Tuesday, May 21, 2024
Homepage · css
 Popular · Latest · Hot · Upcoming
83
rated 0 times [  88] [ 5]  / answers: 1 / hits: 22953  / 12 Years ago, thu, october 11, 2012, 12:00:00

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?


More From » css
 Answers
28

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.


[#82610] Wednesday, October 10, 2012, 12 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
yamileth
Add To Favorites
Follow
Total Points: 53
Total Questions: 96
Total Answers: 112
Location: England
Member since Tue, Sep 8, 2020
4 Years ago
;