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其它相关文章!