Modernizr with Respond.js

Question

我正在仔细评估利用Modernizr和Respond.js进行响应式设计的最佳方式,并为社区提出了几个问题.

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

其次,您是否认为这是在IE8及以下版本中获得媒体查询支持的最有效方式？从本质上讲,我将包括一个比已经支持媒体查询的浏览器所需的更大的Modernizr脚本.如果对媒体查询的测试失败,分离两个脚本并且只加载Respond.js会不会更有效率？

第三,如果我想分开这两个脚本,你认为如果需要加载Respond.js的最佳方法是什么？一种选择是使用IE特定的条件注释来加载Respond.另一个选择是使用yepnope和Modernizr测试媒体查询支持并在需要时加载Respond.哪个更有效,更具有故障性.

最后,如果我选择分离这两个脚本并使用Modernizr加载Respond,如果需要,我遇到了以下两种技术:

<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,但必须只需要重写.你会推荐哪种技术？

谢谢你的帮助.

Answer 1

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

那么你需要至少一些CSS3媒体查询来帮助你入门.Respond.js本质上只是针对不支持它们的浏览器的媒体查询的JavaScript实现(例如IE小于8).只需确保在您的CSS3媒体查询(链接)之后引用Respond.js .

所以,是的,假设您从自定义构建或其他任何东西捆绑了Modernizr的Respond.js,并且在CSS3之后加载,那么一切都很好.此外,Modernizr需要在HTML(链接)中进行更多配置

其次,您是否认为这是在IE8及以下版本中获得媒体查询支持的最有效方式？从本质上讲,我将包括一个比已经支持媒体查询的浏览器所需的更大的Modernizr脚本.如果对媒体查询的测试失败,分离两个脚本并且只加载Respond.js会不会更有效率？

如果没有开箱即用的媒体查询,Modernizr 不支持浏览器.您需要在自定义构建中添加它.所以,是的,我认为总是包括回应是明智的.缩小,库只增加了3kb以上,并且将它包含在Modernizr文件中将不会添加另一个GET请求.我只想把它留在那里为一切做好准备.

第三,我会选择Modernizr方法.我喜欢使用新的东西,所有额外的JavaScript都会妨碍我.

Answer 2

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

这是修订版:https: //github.com/scottjehl/Respond/commit/4d60f45716b8395e6f24238f9dc5e34c857e87f2

从主response.js函数外部包含window.matchMedia polyfill.这个polyfill的源代码在这里https://github.com/paulirish/matchMedia.js,包括它开箱即用将使事情更容易保持更新,并允许较小的文件压缩已经包括它通过Modernizr或其他方式(如果你是,你可以从Respond.js中删除它).

此外,您应该注意,在解析和应用媒体查询样式之前,使用yepnope.js可能会导致您看到非媒体查询样式的延迟.建议您在标题中放置respond.js以尽可能避免这种情况,尽管如此,将js文件保留在页脚中也是如此.