如何在IE8中使用移动端优先

Question

考虑到SingularityGS在默认情况下遵循移动优先的方法，你们如何解决IE8中的问题，它显示了一切依赖媒体查询的移动版本？

你找到解决这个问题的办法了吗?还是我必须切换到桌面优先？

谢谢。

Answer 1

你可以让IE7-8真正支持媒体查询，而不是绕过IE7和IE8的缺点！

我在IE7和IE8中使用了非常棒的Respond.js polyfill来启用媒体查询。只需将这段代码添加到您的HTML中，就可以了！

<!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->

您可能还想在IE7和8中启用CSS3选择器，以便像.column:nth-child(#{$i}n) { @include float-span(1, 'last'); }这样的东西可以工作。

您将需要Selectivizr polyfill。为了使Respond与Selectivizr一起工作，Selectivizr应该是版本1.0.3b或更高版本的(由于某些原因，它还没有发布为稳定的for two years )，并且应该在Respond之前加载。Selectivizr还需要在它之前加载NWMatcher或alternative。所以正确的顺序是：

<!--[if lt IE 9]>
  <script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
  <script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->

而且你完全应该有html5shiv polyfill (又名html5shim)来使IE7-8支持最基本的CSS3内容。

所以我最终的IE7-8 polyfills集看起来是这样的：

<!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
  <script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
  <script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->

注意:不要将IE9.js和它们结合使用，因为这会使IE 8冻结。

Answer 2

我将断点内置的无查询回退支持与我的HTML标记上的IE类或用于媒体查询支持的现代测试结合使用。

https://github.com/Team-Sass/breakpoint/wiki/No-Query-Fallbacks