考虑到 SingularityGS 默认遵循移动优先的方法,你们如何解决 IE8 中的问题,它显示了所有依赖于媒体查询的移动版本?
您是否找到了解决方案,还是我必须先切换到桌面?
谢谢。
考虑到 SingularityGS 默认遵循移动优先的方法,你们如何解决 IE8 中的问题,它显示了所有依赖于媒体查询的移动版本?
您是否找到了解决方案,还是我必须先切换到桌面?
谢谢。
您可以让 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 冻结。
我将 Breakpoint 内置的 No Query Fallback 支持与我的 HTML 标记上的 IE 类或用于媒体查询支持的 Modernizr 测试结合使用。
https://github.com/Team-Sass/breakpoint/wiki/No-Query-Fallbacks