媒体查询Polyfill性能 - IE

时间:2012-10-02 07:27:59

标签: css media-queries polyfills

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

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

这会影响性能多少?有没有正确的测试?

我问,因为我现在处于阶段,如果填充物影响性能足够我可以调整设计,所以我不必使用它们,也可以考虑未来的项目。

奖金问题:
如果我不首先使用移动设备但最后使用移动设备,并执行max-width查询而不是min,我是否还需要填充。如果页面没有变化,直到它的宽度小于500px,我真的需要担心IE不显示它们吗?或者我错过了一些边缘案例?

1 个答案:

答案 0 :(得分:1)

让我们从您的红利问题开始。

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

可能仍然运行IE7的用户将没有1920x1200分辨率的高清屏幕。因此,请记住,在没有涉及媒体查询的情况下,为800x600屏幕使一切正常

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


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

如果您希望为此15%(每100个约6个)提​​供最佳用户体验,那么您可能需要 respond.js

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

Modernizr建议并包含在html5boilerplate响应式构建中,所以我很确定你可以......信任它; - )