首页 > 技术文章 > 实现IE6-Ie8媒体查询

wjh0916 2015-12-04 10:33 原文

停下来,不代表要放弃,只是在自我调整寻找一个最好状态的自我。所以在没对自己说“放弃”就不会放弃。

..............................................................以下是正文............................................................

css3添加的样式,圆角、渐变、动画等让每个前端眼前一亮,特别是媒体查询更让页面的编写者为之疯狂,宝宝编写的页面可以适配不同的设备不同的分辨率,是一件多么兴奋的是,一劳永逸啊!!!

但是作为前端的公敌的IE,当然不放过这么好的机会制造事端,哈哈,上有政策下有对策。当然只是IE6-IE8。

如有需要,则请继续往下看:

一、bootStrap对IE6兼容解决

bsie能在IE6上支持大部分bootstrap的特性,可惜,还有一些实在无法支持...

下面的这个表格就是当前已经被支持的bootstrap的组件和特性:

 

.......

详情请访问网站:  http://www.bootcss.com/p/bsie/

二、媒体查询兼容

不支持CSS3 Media Queryes特性的浏览器能够支持响应性设计,尤其是小于等于8的ie浏览器。 解决方法是Respond.js插件

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

推荐阅读