Javascript 使用 Respond.js 的 Modernizr

Modernizr with Respond.js

提问by dropseed

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

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

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?

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

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?

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

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.

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

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

最后，如果我选择将两个脚本分开并在需要时使用 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>

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

我发现第二个崩溃 IE8，但必须只需要重写。你会推荐哪种技术？

Thanks for all the help.

感谢所有的帮助。

回答by Andrew

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?

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

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).

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

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)

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

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?

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

Modernizr doesn't come with support for browsers without media queriesout 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.

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

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

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

回答by tkane2000

The new version of Respond includes some feature testing so you don't need Modernizr or Yepnope!

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

Here's the revision: https://github.com/scottjehl/Respond/commit/4d60f45716b8395e6f24238f9dc5e34c857e87f2

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

included the window.matchMedia polyfill externally from the main respond.js function. The source code for this polyfill is here https://github.com/paulirish/matchMedia.js, and including it out-of-the-box will make things easier to keep updated, and allow for smaller file compression for those already including it via Modernizr or otherwise (if you are, you can delete it from Respond.js).

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

Also, you should note that using yepnope.js could cause a delay in which you see the non-media query styles before the media query styles are parsed and applied. The recommendation is that you put respond.js in the header to avoid this as much as possible, although, it's also good to keep your js files in the footer so up to you.

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

回答by armyofda12mnkeys

Feature testing might be in newer lib like tkane2000 says ... Just wanted to mention you could probably do this via Modernizr too:

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

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

Original Poster has i think invalid media query check '(only all)' ... Shouldnt be any parenthesis based on some things I read. Once I removed the parens, respond.js seems to be included appropriately.

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