Modernizr 与 Respond.js答案

【问题标题】：Modernizr with Respond.jsModernizr 与 Respond.js
【发布时间】：2012-01-06 14:43:37
【问题描述】：

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

首先，据我了解，在将 Modernizr 与 Respond.js 捆绑在一起时，IE8 及以下版本的媒体查询支持不需要其他编码或测试。换句话说，当 Respond.js 与 Modernizr 捆绑在一起时，我只需在我的源代码中加载 Modernizr 即可激活 Respond.js。对吗？

其次，您认为这是在 IE8 及以下版本中实现对媒体查询支持的最有效方式吗？本质上，我将包含一个比已经支持媒体查询的浏览器所需的更大的 Modernizr 脚本。如果媒体查询测试失败，将两个脚本分开并仅加载 Respond.js 不是更有效吗？

第三，如果我想分离这两个脚本，如果需要，您认为加载 Respond.js 的最佳方式是什么？一种选择是使用 IE 特定的条件注释来加载响应。另一种选择是使用 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，但必须只需要重写。您会推荐哪种技术？

感谢大家的帮助。

【问题讨论】：

很好的问题！回复：1，我建议以一种解释为什么不仅仅是你懒惰检查的方式来表达一个问题……回复：2 请注意“如果媒体查询测试失败，则仅加载 Respond.js？”意味着不支持 MQ 的浏览器将支付额外的往返费用（对于 response.js 脚本）；虽然它确实为每个访问者节省了 1kb（缩小+gzipped respond.js）来支持浏览器。这是一个权衡。

标签： javascript html css modernizr polyfills

【解决方案1】：

首先，据我了解，在将 Modernizr 与 Respond.js 捆绑在一起时，IE8 及以下版本的媒体查询支持不需要其他编码或测试。换句话说，当 Respond.js 与 Modernizr 捆绑在一起时，我只需在我的源代码中加载 Modernizr 即可激活 Respond.js。对吗？

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

所以，是的，假设您通过自定义构建或其他方式将 Respond.js 与 Modernizr 捆绑在一起，并且在您的 CSS3 之后加载，那么一切都很好。此外，Modernizr 需要在您的 HTML (link) 中进行更多配置

其次，您认为这是在 IE8 及以下版本中实现对媒体查询支持的最有效方式吗？本质上，我将包含一个比已经支持媒体查询的浏览器所需的更大的 Modernizr 脚本。如果媒体查询测试失败，将两个脚本分开并仅加载 Respond.js 不是更有效吗？

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

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

【讨论】：

注意，Modernizr 出于性能原因不再捆绑 Respond.js。请参阅此评论github.com/Modernizr/Modernizr/issues/467#issuecomment-3468968。

【解决方案2】：

功能测试可能像 tkane2000 所说的那样在较新的库中进行...... 只是想提一下，您也可以通过 Modernizr 做到这一点：

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

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

【讨论】：

【解决方案3】：

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

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

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

此外，您应该注意，使用 yepnope.js 可能会导致您在解析和应用媒体查询样式之前看到非媒体查询样式的延迟。建议您将 response.js 放在页眉中以尽可能避免这种情况，不过，将 js 文件保留在页脚中由您自己决定也是很好的。

【讨论】：