如何在IE8中使用移动优先设计？

Question

如何在IE8中使用移动优先设计？

internet-explorer-8singularitygs

15

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

你们已经找到了解决方案还是我需要切换到桌面优先？

谢谢。

- Luis Martins

2个回答

7

我使用Breakpoint内置的无查询回退功能，结合HTML标记上的IE类或Modernizr测试媒体查询支持。

请参考： https://github.com/Team-Sass/breakpoint/wiki/No-Query-Fallbacks

- Snugug

谢谢。我还没有使用Sass或Modernizr，所以我不确定我能否实现它。如果您知道任何关于如何使用它的好教程或解释，请在此发布。我一直在阅读有关它如何节省时间和非常棒的文章，但是不知道如何使用它或设置它。 - Terri Swiatek

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andrey Mikhaylov - lolmaus · Accepted Answer

你可以让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。为了让Respond与Selectivizr一起工作，Selectivizr应该是版本1.0.3b或更高版本（由于某些原因，在两年内尚未发布稳定版本 ），并且应该在Respond之前加载。 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冻结。