19

respond.js还是css3-mediaqueries.js？

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

响应.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. 实时反应（调整大小！）
  2. 支持em单位（真的吗？有人测试过吗？）

缺点：

  1. 较重 (15kb) 且较慢
  2. 仅解释具有明确声明的媒体类型的内联 CSS
  3. 缺乏详细的文档，该项目似乎被遗弃了

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

4

2 回答 2

18

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

如果有人有兴趣，这里是测试页面，这些是结果（在 IE8 和 IE7 上测试）。

css3-mediaqueries.js

优点

  1. 支持min和max媒体min+max查询
  2. 支持px和em价值观
  3. 对窗口调整大小作出反应
  4. 详细说明页面 CSS ( <style>) 和外部样式表

缺点

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

响应.js

优点

  1. 支持min和max媒体min+max查询
  2. 支持px和em价值观
  3. 对窗口调整大小作出反应
  4. 仅详细说明外部样式表

缺点

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

mediatizr.js

简单..不起作用

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

于 2012-10-25T11:28:43.900 回答
-2

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

于 2015-10-13T03:59:21.160 回答