css3-mediaqueries.js VS respond.js

Posted 2023-02-18

【中文标题】css3-mediaqueries.js VS respond.js

【英文标题】：

【发布时间】：2012-10-02 00:00:05

【问题描述】：

respond.js 或 css3-mediaqueries.js ?

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

respond.js

优点：

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

缺点：

在调整窗口大小时不更新 仅支持min-width 和max-width 不支持em 单位（巨大的弱点！）

css3-mediaqueries.js

优点：

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

缺点：

较重 (15kb) 且较慢 只解释带有explicitly declared media-type 的内联CSS 缺乏详细的文档，项目似乎被放弃了

---

有没有人想在列表中添加点，或者个人经验可以分享，或者对一个或另一个脚本有特别的偏好？如果有，为什么？

【问题讨论】：

值得退后一步，想想你为什么需要这个。 IE6-8 只能在台式计算机上运行。这意味着您知道屏幕尺寸将介于 800x600 到 1920x1080 之间。但是，请记住，大多数用户将使用带有 IE6-8 的计算机，我们可以假设对于大多数用户来说，它将是 1024x768 左右。因此，他们得到了一个 960 像素宽的网站。如果你愿意，它可能会有点流动。问题解决了！ :)

感谢@RichBradshaw 的评论。确实，您的反馈是有道理的，我可以让他们解释“平均桌面屏幕”媒体查询。但是在我住的地方，很常见的是旧电脑连接到更新的屏幕，所以仍然在 IE8 上运行的分辨率范围非常大（高达 1600x900 及以上）。由于这个和其他原因，我经常发现自己处于需要使用polyfill的情况......

记住他们可能没有全屏运行。但足够公平，如果您有数据来支持要求。请记住，响应能力只是锦上添花。

【参考方案1】：

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

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

---

css3-mediaqueries.js

优点

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

缺点

不支持width媒体查询 没有详细说明<link media="screen and ..."> 也没有@imported 样式表

---

respond.js

优点

支持min、max和min+max媒体查询 支持px 和em 值 对调整窗口大小做出反应 仅详细说明外部样式表

缺点

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

---

mediatizr.js

只是..不起作用

---

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

【讨论】：

我在尝试响应后成功使用了 mediatizr，但它无法正常工作。

从内存中 css3-mediaqueries.js 支持 cm 而 respond.js 不支持。

我对 respons.js 有一些问题，所有页面随机都是白色的，所以我切换到 css3-mediaqueries.js，但随后 CPU 达到 99% 并导致 IE8 崩溃。向后兼容创建现代网站很痛苦

【参考方案2】：

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