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

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

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

谢谢。

你可以让IE 7-8真正支持媒体查询，而不是围绕着IE 7和8的缺点工作!

我使用了很棒的response .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]-->

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

你将需要Selectivizr填充。为了使response与Selectivizr一起工作，Selectivizr应该是 1.0.3b或更高版本(由于某种原因，它还没有作为稳定版本发布两年)，并且应该在response 之前加载。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)，使IE 7-8支持最基本的CSS3的东西。

所以我最终的IE 7-8多边形是这样的:

<!--[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，因为它会使ie8冻结

我使用Breakpoint的内置无查询回退支持结合IE类在我的HTML标签或Modernizr测试媒体查询支持。

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

相关内容

最新更新

热门标签：