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>

OR

<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媒体查询（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都会妨碍你。

Answer 2

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

以下是修订版： https://github.com/scottjehl/Respond/commit/4d60f45716b8395e6f24238f9dc5e34c857e87f2

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

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

Answer 3

功能测试可能在更新的lib中，如tkane2000所说... 只是想提一下你也可以通过Modernizr做到这一点：

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

原始海报我认为无效的媒体查询检查'（仅限所有）'...根据我阅读的一些内容，不应该是任何括号。一旦我删除了parens，似乎可以适当地包含respond.js。

Modernizr with Respond.js

3 个答案: