Modernizr with Respond.js

我仔细评估了利用Modernizr和Respond.js进行响应式设计的最佳方法，并针对社区提出了一些问题。Modernizr with Respond.js

首先，我的理解是，将Modernizr与Respond.js捆绑在一起时，在IE8及以下版本中不需要其他编码或测试来支持媒体查询。换句话说，当Respond.js与Modernizr捆绑在一起时，我只需在我的源代码中加载Modernizr即可使Respond.js处于活动状态。正确？其次，你认为这是在IE8及以下版本中支持媒体查询的最有效方式吗？实质上，我将包含比已经支持媒体查询的浏览器所需更大的Modernizr脚本。如果对媒体查询的测试失败，分离这两个脚本并仅加载Respond.js会不会更高效？

第三，如果我想分开这两个脚本，您认为如果需要加载Respond.js最好的方法是什么？一种选择是使用IE特定的条件注释来加载响应。另一种选择是使用yepnope和Modernizr来测试媒体查询支持，并在需要时加载Respond。这会更有效和防错。

最后，如果我选择分开两个脚本，并使用Modernizr的如果需要的话我也遇到以下两种方法来加载回应：

<script> 
     yepnope({ 
    test : Modernizr.mq('(only all)'), 
    nope : ['js/libs/respond.min.js'] 
}); 
</script>

<script>Modernizr.mq('(min-width:0)') || document.write('<script src="js/libs/respond.min.js"><\/script>')</script>

我发现，第二次崩溃IE8，但必须只需要重写。你会推荐哪种技术？

感谢您的帮助。

来源

2011-11-25 dropseed

那里有很好的问题！回复：1，我建议用一种方式来解释一个问题，这就解释了为什么它不只是懒惰地检查...... Re：2请注意“如果对媒体查询的测试失败，只加载Respond.js？”意味着不支持MQ的浏览器将支付额外的往返（用于respond.js脚本）;同时它为每个访问者支持浏览器节省1kb（缩小+ gzipped respond.js）。这是一个折衷。 – Nickolay

首先，我的理解是，在将Modernizr与Respond.js捆绑在一起时，在IE8及以下版本中，不需要其他编码或测试来支持媒体查询。换句话说，当Respond.js与Modernizr捆绑在一起时，我只需在我的源代码中加载Modernizr即可使Respond.js处于活动状态。正确？

那么您至少需要一些CSS3媒体查询才能开始。 Respond.js实质上只是不支持它们的浏览器的媒体查询的JavaScript实现（例如，IE小于8）。只需确保在您的CSS3媒体查询后（link），对Respond.js的引用就会出现。所以，是的，假设你有自定义版本或其他类型的与Modernizr捆绑在一起的Respond.js，并且在你的CSS3之后加载，你都很好。此外，Modernizr的需要一些更多的配置在你的HTML（link）

其次，你相信这是实现媒体查询支持IE8及以下的最有效方法是什么？实质上，我将包含比已经支持媒体查询的浏览器所需更大的Modernizr脚本。如果对媒体查询的测试失败，分离这两个脚本并仅加载Respond.js会不会更高效？

Modernizr doesn't come with support for browsers without media queries开箱即用。您需要将其添加到自定义构建中。所以，是的，我认为总是包括回应是很明智的。缩小了，库只增加了3kb多一点，并且它包含在Modernizr文件中不会添加另一个GET请求。我会说只是把它留在那里为一切准备。

第三，我会用Modernizr方法。我喜欢使用新的东西，所有额外的JavaScript阻碍。

来源

2011-12-05 03:58:59 Andrew

请注意，由于性能原因，Modernizr不再捆绑Respond.js。看到这个评论https://github.com/Modernizr/Modernizr/issues/467#issuecomment-3468968。 – Andrew

Respond的新版本包含一些功能测试，因此您不需要Modernizr或Yepnope！

这里的修订： https://github.com/scottjehl/Respond/commit/4d60f45716b8395e6f24238f9dc5e34c857e87f2

包括window.matchMedia填充工具从外部主respond.js功能。这个polyfill的源代码在这里是https://github.com/paulirish/matchMedia.js，包括它的开箱即用会让事情更容易保持更新，并允许通过Modernizr或其他方式对其进行更小的文件压缩（如果您是，可以从Respond.js中删除它）。

此外，你应该注意的是使用yepnope.js可能导致你看到媒体查询样式前非媒体查询样式分析和应用的延迟。建议您将respond.js放在头文件中以尽可能避免这种情况，不过，将js文件保留在页脚中也是很好的做法。

来源

2012-03-05 21:02:09 tkane2000

功能测试可能会在新的lib像tkane2000说... 只是想提一提，你可以通过Modernizr的可能就此别过：

<script> 
    Modernizr.load({ 
    test: Modernizr.mq('only all'), 
    nope: 'js/respond.min.js' 
    }); 
    </script>

原来的海报有我认为无效的媒体查询检查“（只所有）'...不应该是基于我阅读的一些东西的任何括号。一旦我移除了parens，respond.js似乎被适当地包含在内。

来源

2013-07-12 17:59:48 armyofda12mnkeys

优秀的答案。 –

Modernizr with Respond.js

回答

相关问题