45

我正在仔细评估利用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，但必须只需要重写。你会推荐哪种技术？

感谢所有的帮助。

4

3 回答 3

16

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

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

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

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

Modernizr不支持没有开箱即用的媒体查询的浏览器。您需要将其添加到自定义构建中。所以，是的，我认为总是包含响应是明智的。缩小后，该库仅增加了 3kb 多一点，并且将其包含在 Modernizr 文件中不会添加另一个 GET 请求。我会说把它留在那里为一切做好准备。

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

于 2011-12-05T03:58:59.963 回答
5

新版本的 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 可能会导致您在解析和应用媒体查询样式之前看到非媒体查询样式的延迟。建议您将 respond.js 放在页眉中以尽可能避免这种情况，不过，将 js 文件保留在页脚中也很好，这取决于您自己。

于 2012-03-05T21:02:09.900 回答
4

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

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

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

于 2013-07-12T17:59:48.683 回答