你如何在IE8中使用移动优先 [英] How do you use mobile-first in IE8

查看:147
本文介绍了你如何在IE8中使用移动优先的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

Considering that SingularityGS follows, by default, a mobile-first approach, how do you guys solve the problem in IE8, which shows the mobile version of everything that depends on media-queries?

您是否找到了解决方案或者我必须先切换到桌面?

Have you found a solution for this or do I have to switch to desktop-first?

谢谢。

推荐答案

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

Instead of working around IE 7 and 8 shortcomings, you can make IE 7-8 actually support media queries!

我使用精彩的 Respond.js polyfill在IE 7和8中启用媒体查询。只需添加此代码为您的HTML < head> ,您很高兴!

I use the awesome Respond.js polyfill to enable media queries in IE 7 and 8. Just add this code to your HTML <head> and you're good to go!

<!--[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选择器,以便像<$ c $这样的东西c> .column:nth-​​child(#{$ i} n){@ include float-span(1,'last'); } 可行。

You might also want to enable CSS3 selectors in IE 7 and 8 so that stuff like .column:nth-child(#{$i}n) { @include float-span(1, 'last'); } would work.

你需要 Selectivizr polyfill。为了响应与Selectivizr合作,Selectivizr应该是版本1.0.3b或更高版本(尚未被发布为稳定由于某种原因导致两年并且应该在响应之前加载。 Selectivizr还需要 NWMatcher 或替代之前加载。所以正确的顺序是:

You'll need the Selectivizr polyfill. For Respond to work together with Selectivizr, Selectivizr should be of version 1.0.3b or later (which hasn't yet been releazed as stable for two years for some reason) and should be loaded before Respond. Selectivizr also requires NWMatcher or alternative to be loaded before it. So the correct order is this:

<!--[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。

And you totally should also have the html5shiv polyfill (aka html5shim) to make IE 7-8 support the most basic CSS3 stuff.

所以我的IE 7-8 polyfills终极套装如下:

So my ultimate set of IE 7-8 polyfills looks like this:

<!--[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冻结的那些结合起来。

Note: don't use IE9.js in combination with those as it will make IE 8 freeze.

这篇关于你如何在IE8中使用移动优先的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆