ie不兼容css媒体查询怎么解决?

ie不兼容css媒体查询怎么解决?下面本篇文章给大家介绍一下ie浏览器不兼容css媒体查询的解决办法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

ie浏览器不兼容css媒体查询的解决办法

考虑到在不同分辨率下,网站页面依然能显示一致,除了通过js来控制,css媒体查询更为方便,而痛点在于ie8不支持。

我们可以通过respond.js库来解决,这个插件的原理很简单:

将head中所有外部引入的css文件路径取出来存储在一个数组中,遍历数组,并一个个发送AJAX请求,AJAX回调后,分析response中的media query的min-width和max-width语法,它仅仅支持min-width和max-width,分析出viewport变化区间对应相应的css块,页面初始化的时候和window.resize时,根据当前viewport使用相应的css块。

在官方文档中也有一些小提示:

  • 越早引入的respond.js,也就越可能避免ie下出现的闪屏;

  • 不支持嵌套的媒体查询;

  • utf-8格式的css文件对respond.js文件的运行有影响;

  • 跨域会出现闪屏;

由此,可以根据这个情况实现基本思路,需要注意到的地方:

1、需要启动本地服务器(localhost),不能使用普通本地的url地址(file://开头);

2、需要外部引入CSS文件,将CSS样式书写在style中是无效的;

3、由于respond插件是查找CSS文件,再进行处理,所以respond文件一定要放置在CSS文件的后面;

4、另外,虽然把respond放置在head里还是在body后面都能够实现,但是建议放置在head中;

5、最好不要为CSS设置utf-8的编码;

最近做项目时发现了一个bug:由于动画@keyframe中的@符号,对respond.js造成影响。

更多web前端知识,请查阅 HTML中文网 !!

以上就是ie不兼容css媒体查询怎么解决?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读