css - 媒体查询 Polyfill 性能 - IE

Question

我正处于构建站点的早期阶段。我正在研究一些可以利用媒体查询在较小屏幕尺寸下正常工作的设计元素。

除了这将是一个小型站点，我对此没有任何问题，因此几乎唯一运行在其上的 javascript 将是一个 Polyfill，用于 IE 和其他浏览器的媒体查询。

这会对性能产生多大影响？是否已运行任何适当的测试？

我问是因为我现在正处于这个阶段，如果 polyfill 对性能的影响足够大，我可以调整设计，这样我就不必使用它们，同时也是对 future 元素的一种思考。

奖励问题:
如果我不先使用移动设备而是最后使用移动设备，并且执行 max-width 查询而不是 min，我什至需要一个 polyfill。如果页面在宽度小于 500px 之前没有任何变化，我真的需要担心 IE 不显示它们吗？还是我遗漏了一些边缘情况？

Answer 1

让我们从您的奖励问题开始。

如果您使用 max-width 媒体查询，我认为您实际上不需要 IE8 及以下版本的 js 解决方案。也就是说，这实际上取决于您网站的“突破点”。

可能，仍在运行 IE7 的用户不会拥有分辨率为 1920x1200 的高清屏幕。因此请记住，在不涉及媒体查询的情况下，让一切在 800x600 屏幕上良好。

就我个人而言，我更喜欢min-width 方法，所以我可以progressively enhance我的网站功能。但这实际上取决于您的元素类型/受众。

---

根据 StatCounter's global stats , 在 2012 年 9 月，约 14% 的用户仍在使用 IE8，不到 2% 的 IE7。

如果您想为这 15%(每 100 人约 6 人)提供最佳用户体验，那么您可能需要 respond.js .

我已经在 IE7 和 IE8 上使用和测试过它。我没有注意到性能上的差异，但我在网上找不到任何基准测试。

由Modernizr推荐并包含在 html5boilerplate 中响应式构建，所以我很确定你可以......相信它 ;-)