css3-mediaqueries.js VS respond.js

Question

respond.js 或 css3-mediaqueries.js ？

官方文档，特别是css3-mediaqueries.js的文档，是稀疏的。阅读SO，论坛和blogs我已经总结了这些优点和缺点。

respond.js

优点：

1. 更可靠（？Modernizr推荐，Twitter Bootstrap 3和H5BP）
2. 更轻（4kb）且更快
3. 在任何上下文中解释mediaquery（<link>，内联CSS，@ import-ed CSS）

缺点：

1. 不会在窗口调整大小上更新
2. 仅支持min-width和max-width
3. 不支持em个单位（巨大的弱点！）

CSS3-mediaqueries.js

优点：

1. 实时反应（调整大小！）
2. 支持em单位（真的吗？有人测试过吗？）

缺点：

1. 较重（15kb）且较慢
2. 仅使用explicitly declared media-type
解释内联CSS
3. 缺乏详细的文档，项目似乎已被放弃

---

是否有人有要添加到列表中的要点，或要分享的个人经历，或者对一个或另一个脚本的特定偏好？如果是这样，为什么？

Answer 1

我创建了一个测试页面，包括Mediatizr。

如果有人有兴趣，here's the test page，这些是results（在IE8和IE7上测试过）。

---

CSS3-mediaqueries.js

赞成

1. 支持min，max和min+max媒体查询
2. 支持px和em值
3. 对窗口调整大小的反应
4. 详细说明页面上的CSS（<style>）和外部样式表

缺点

1. 不支持width mediaquery
2. 不详述<link media="screen and ...">或@import ed stylesheet

---

respond.js

赞成

1. 支持min，max和min+max媒体查询
2. 支持px和em值
3. 对窗口调整大小的反应
4. 仅阐述外部样式表

缺点

1. 不支持width mediaquery
2. 没有详细说明页面CSS，<link media="screen and ...">或@import ed样式表
3. 与jQuery on load事件结合使用时可能会导致javascript错误，要解决此问题，您需要将脚本放在页面末尾

---

mediatizr.js

简单......不起作用

---

最后，我选择 css-mediaqueries.js ，有条件地加载了Modernizr。

Answer 2

现在可能没什么问题了。我开发了一个纯Javascript框架来生成和管理媒体查询。它适用于所有浏览器和操作系统。它的足迹少于500个字符。你可以看到它在这里工作： ieee-ac.org。