css3-mediaqueries.js VS respond.js
-
06-07-2021 - |
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:
- More reliable (? recommended by Modernizr , Twitter Bootstrap 3 and H5BP )
- Lighter (4kb) and faster
- Interpret mediaquery in any context (
<link>
, inline CSS, @import-ed CSS)
Cons:
- Doesn't update on window resize
- Supports only
min-width
andmax-width
- Doesn't support
em
units (huge weak point!)
css3-mediaqueries.js
Pros:
- Reacts in real time (on resize too!)
- Supports
em
units (really? anyone tested it?)
Cons:
- Heavier (15kb) and slower
- Interpret only inline CSS with a explicitly declared media-type
- 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?
Solution
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
- Supports
min
,max
andmin+max
mediaqueries - Supports
px
andem
values - Reacts on window resize
- Elaborates on-page CSS (
<style>
) and external stylesheets
Cons
- Doesn't support
width
mediaquery - Doesn't elaborate
<link media="screen and ...">
nor@import
ed stylesheet
respond.js
Pros
- Supports
min
,max
andmin+max
mediaqueries - Supports
px
andem
values - Reacts on window resize
- Elaborates external stylesheets only
Cons
- Doesn't support
width
mediaquery - Doesn't elaborate on-page CSS,
<link media="screen and ...">
nor@import
ed stylesheets - 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.
OTHER TIPS
The point is probably moot now. I have developed a pure Javascript framework that generates and manages media queries. It works with all browsers and operating systems. It's footprint is less than 500 characters. You can see it working here: ieee-ac.org.