javascript - css3-mediaqueries.js VS respond.js - Stack Overflow

admin管理员组

文章数量:1202038

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?

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?

• javascript
• css
• media-queries
• polyfills

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Oct 11, 2012 at 10:31 GionaGiona 21.1k55 gold badges5959 silver badges6868 bronze badges 3

• 3 It's worth stepping back and thinking why you need this. IE6-8 are run on desktop computers only. That means you know the screen size is going to be between 800x600 up to 1920x1080. However, bearing in mind that most users will be using a computer that shipped with IE6-8, we can assume that for most users it will be around 1024x768. So, they get a site that's say, 960px wide. Maybe it could be a little fluid if you like. Problem solved! :) – Rich Bradshaw Commented Oct 11, 2012 at 20:54
• Thanks for the comment @RichBradshaw. Indeed your feedback makes sense, i could let them interpret the "average desktop screen" mediaquery. But where i live it's common to see old computers connected to much more recent screens, so the range of resolutions which still run on IE8 is very large (up to 1600x900 and over). For this and other reasons, i often find myself in the situation of needing to use a polyfill... – Giona Commented Oct 11, 2012 at 21:48
• Remember they might not be running full screen. But fair enough, if you have the data to back up the requirement. Remember responsiveness is just icing on the cake though. – Rich Bradshaw Commented Oct 12, 2012 at 7:25

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 18

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.

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.

本文标签： javascriptcss3mediaqueriesjs VS respondjsStack Overflow