Modernizr与Respond.js [英] Modernizr with Respond.js

问题描述

我仔细评估了使用 Modernizr 和 Respond.js 的响应设计，并有社区的几个问题。

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

其次，你认为这是在IE8及以下版本中实现媒体查询支持的最有效的方法吗？实质上，我将包括一个更大的Modernizr脚本，而不是已经支持媒体查询的浏览器。如果对媒体查询的测试失败，分离两个脚本并且只加载Respond.js会更有效吗？

第三，如果我想分开两个脚本，你相信是什么是加载Respond.js如果需要的最佳方式？一个选项是使用IE特定的条件注释来加载Respond。另一个选项是使用yepnope和Modernizr测试媒体查询支持和加载如果需要响应。

最后，如果我选择分离两个脚本并使用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，但必须重写。

感谢您的帮助。

解决方案

blockquote>

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

你需要至少一些CSS3媒体查询才能开始使用。 Respond.js本质上只是针对不支持它们的浏览器的媒体查询的JavaScript实现（例如IE小于8）。只需确保在您的CSS3媒体查询之后引用Respond.js（链接< a>）。

所以，是的，假设你有Respond.js捆绑与Modernizr从自定义生成或任何，并且是加载CSS3后，你都好。此外，Modernizr需要在HTML中进行一些配置（链接）

其次，你相信这是在IE8及以下版本中支持媒体查询的最有效的方式吗？实质上，我将包括一个更大的Modernizr脚本，而不是已经支持媒体查询的浏览器。如果对媒体查询的测试失败，分离两个脚本并且只加载Respond.js会更有效吗？

Modernizr 不支持开箱即用的没有媒体查询的浏览器。您需要将其添加到自定义构建中。所以，是的，我认为总是包括回应是聪明的。缩小，库只添加了一点点超过3kb，并且它包含在Modernizr文件中将不会添加另一个GET请求。

第三，我将使用Modernizr方法。我喜欢使用新的东西，所有额外的JavaScript得到的方式。

I am carefully assessing the best way to utilize Modernizr and Respond.js for responsive design and have a couple of questions for the community.

Firstly, it is my understanding that when bundling Modernizr with Respond.js, no other coding or tests are required for media query support in IE8 and below. In other words, when Respond.js is bundled with Modernizr I merely have to load Modernizr in my source to get Respond.js active. Correct?

Secondly, do you believe this is the most efficient way to achieve support for media queries in IE8 and below? In essence, I would be including a larger Modernizr script than is needed for browsers that already support media queries. Wouldn't it be more efficient to separate the two scripts and only load Respond.js if a test for media queries fails?

Third, if I would like to separate the two scripts, what do you believe is the best way to load Respond.js if needed? One option would be to use an IE specific conditional comment to load Respond. Another option is to use yepnope and Modernizr to test for media query support and load Respond if needed. Which would be more efficient and fault-proof.

Lastly, if I choose to separate the two scripts and use Modernizr to load Respond if needed I have encountered the two following techniques:

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

OR

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

I have found that the second crashes IE8, but must just need rewriting. Which technique would you recommend?

Thanks for all the help.

解决方案

Firstly, it is my understanding that when bundling Modernizr with Respond.js, no other coding or tests are required for media query support in IE8 and below. In other words, when Respond.js is bundled with Modernizr I merely have to load Modernizr in my source to get Respond.js active. Correct?

Well you need at least some CSS3 media queries to get you started. Respond.js is essentially just a JavaScript implementation of media queries for browsers that don't support them (e.g. IE less than 8). Just make sure the reference to Respond.js comes AFTER your CSS3 media queries (link).

So, yes, assuming you have Respond.js bundled with Modernizr from a custom build or whatever, and that is loaded after your CSS3, you're all good. Also, Modernizr needs some more configuration in the of your HTML (link)

Secondly, do you believe this is the most efficient way to achieve support for media queries in IE8 and below? In essence, I would be including a larger Modernizr script than is needed for browsers that already support media queries. Wouldn't it be more efficient to separate the two scripts and only load Respond.js if a test for media queries fails?

Modernizr doesn't come with support for browsers without media queries out of the box. You need to add it in a custom build. So, yes, I think it's smart to always include respond. Minified, the library only adds a little more than 3kb, and having it included in the Modernizr file won't add another GET request. I'd say just leave it in there to be prepared for everything.

Third, I'd go with the Modernizr method. I like using new stuff, all that extra JavaScript gets in the way.

这篇关于Modernizr与Respond.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！