您的位置:首页> 日志> 前端技术 正文
DTOP

兼容ie8以下的媒体查询

卓文静 | 2014年12月31日 |

>>收藏本文 已有 6条评论

 

这个月做的中山东区学校的项目中,要适应两个屏幕,有两个方法,一个是js判断屏幕分辨率大小,再给容器加一个class类区分,这个方法可以兼容所有的浏览器,还有一个方法就是现在流行的媒体查询(CSS3 Media Query),可惜媒体查询不支持ie8及以下的浏览器,经百度,得知有个Respond.js插件可以使其兼容

Respond.js

一个快速、轻量的关于 css3 Media Qurery 的媒体特性(min/max-width)polyfill(用来兼容IE6-8或更多的浏览器),它的目标是使得那些不支持CSS3 Media Queryes特性的浏览器能够支持响应性设计,尤其是小于等于8ie浏览器。 

Respond.js缺陷

1.脚本仅仅对min-width 和 max-width media queries 以及所有的media types(screen,print,等等)不支持的浏览器提供支持,引用Respond.js脚本,放到所有css文件之后(它越早运行,ie用户看到非media内容的闪烁的几率越小)。

2.由于浏览器的安全机制,Respond.js 不能在通过 file:// 协议(打开本地HTML文件所用的协议)访问的页面上发挥正常的功能。如果需要测试 IE8 下面的响应式特性,务必通过 http 协议访问页面

3.Respond.js 不支持通过 @import 指令所引入的 CSS 文件。例如,Drupal 一般被配置为通过 @import 指令引入CSS文件,Respond.js 对其将无法起到作用。

4.宽域问题,如果 Respond.js 和 CSS 文件被放在不同的域名或子域名下面时需要一些额外的设置,参考http://my.oschina.net/ximidao/blog/349130

不同屏幕效果图

 

源码地址

/UploadFiles/upload/201412311558033185.rar