使用Respond.js实现现代化

Question

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

首先，我的理解是，当将IE8与Respond.js捆绑在一起时，不需要为IE8及更低版本的媒体查询支持进行其他编码或测试。换句话说，当Respond.js与Respond.js捆绑在一起时，我只需在源代码中加载它就可以激活它。对，是这样?

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

第三，如果我想分开这两个脚本，如果需要的话，你认为加载Respond.js的最好方法是什么？一种选择是使用IE特定的条件注释来加载响应。另一种选择是使用yepnope和Modernizr来测试媒体查询支持，并在需要时加载响应。这样会更有效率，也更容易出错。

最后，如果我选择将这两个脚本分开，并在需要时使用Modernizr加载响应，我遇到了以下两种技术：

<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崩溃，但必须重写。你会推荐哪种技术？

谢谢你的帮助。

Answer 1

首先，我的理解是，当将现代与Respond.js捆绑在一起时，IE8及以下版本的媒体查询支持不需要任何其他编码或测试。换句话说，当Respond.js与Respond.js捆绑在一起时，我只需在源代码中加载它就可以激活它。对，是这样?

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

所以，是的，假设你已经从一个定制的版本或者其他什么东西中捆绑了Respond.js，并且在你的CSS3之后加载，你就一切都好了。另外，现代还需要在你的超文本标记语言(link)中进行更多的配置

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

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

第三，我会使用现代方法。我喜欢使用新的东西，所有额外的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，包括它的开箱即用将使事情更容易保持更新，并允许那些已经通过https://github.com/paulirish/matchMedia.js或其他方式包含它的人进行较小的文件压缩(如果你是，你可以从Respond.js中删除它)。

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

Answer 3

功能测试可能会像tkane2000说的那样出现在较新的库中。我只想提一下，你也可以通过Modernizr做到这一点：

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

原始海报有我认为无效的媒体查询检查‘(只有全部)’...根据我读到的一些东西，不应该是任何插入语。一旦我去掉了括号，respond.js似乎就被适当地包含进来了。