javascript - css3-mediaqueries.js VS respond.js

Question

respond.js 或 css3-mediaqueries.js ？

官方文档，尤其是 css3-mediaqueries.js 的文档很少。阅读 SO、论坛和 blogs我总结了这些优缺点。

响应.js

优点:

1. 更可靠(？由 Modernizr、Twitter Bootstrap 3 和 H5BP 推荐)
2. 更轻 (4kb) 更快
3. 在任何上下文中解释媒体查询(<link>、内联 CSS、@import-ed CSS)

缺点:

1. 不在窗口调整大小时更新
2. 仅支持 min-width和 max-width
3. 不支持em单位(巨大的弱点!)

css3-mediaqueries.js

优点:

1. 实时使用react(在调整大小时也是如此!)
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值(value)观
3. 对窗口调整大小使用react
4. 详细阐述页面 CSS ( <style> ) 和外部样式表

缺点

1. 不支持width媒体查询
2. 不详述<link media="screen and ...">也不@import编辑样式表

---

响应.js

优点

1. 支持 min , max和 min+max媒体查询
2. 支持 px和 em值(value)观
3. 对窗口调整大小使用react
4. 仅详细说明外部样式表

缺点

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

---

mediatizr.js

只是..不起作用

---

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