Question

考虑到SingularityGS默认采用移动优先方法，你们如何解决IE8中的问题，IE8显示了依赖于媒体查询的所有内容的移动版本？

您是否为此找到了解决方案，还是我必须先切换到桌面？

感谢。

Answer 1

而不是解决IE 7和8的缺点，你可以让IE 7-8实际上支持媒体查询！

我使用了很棒的Respond.js polyfill来启用IE 7和8中的媒体查询。只需将此代码添加到您的HTML <head>中，您就可以了！

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

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

您需要Selectivizr polyfill。为了响应与Selectivizr一起工作，Selectivizr应该是版本1.0.3b或更高版本（由于某种原因还没有被发布为稳定的for two years）并且应该< strong>在响应之前加载。 Selectivizr还需要NWMatcher或替代它才能加载它。所以正确的顺序是：

<!--[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）来让IE 7-8支持最基本的CSS3。

所以我的IE 7-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

我使用Breakpoint内置的无查询后备支持与HTML标记上的IE类或Mediaizr测试支持媒体查询。

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

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

2 个答案: