【前言】
之前讲解响应式布局时,只是举了几个简单例子。后直接开始BootStrap框架讲解,由于时间问题,对于兼容未做介绍。最近又有同学测试后发现IE不支持媒体查询@media,对此在这里做下记录,总结下ie浏览器不兼容css媒体查询的解决办法。
【问题】
考虑到在不同分辨率下,网站页面依然能显示一致,除了通过js来控制,css媒体查询更为方便,而痛点在于ie8不支持。
【思考】
首先我们来测试下BootStrap在IE下的情况,测试后发现可以正常支持响应布局。那么为什么BootStrap可以呢?经常使用BootStrap的可以发现,Bootstrap里面引入了这个Respond.js文件,从名字看出来是自适应的兼容。也正是这个脚本,使得IE6-8支持CSS3 Media Query
respond.js的CDN可以去网上找,这里我写了出来,打开复制即可:
1.4.2版:
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>引入后,打开IE看下,会发现自适应的效果挺好的。因此Respond.js让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
【解决方案】
我们可以通过respond.js库来解决,这个插件的原理很简单
【插件原理】
需要理解respond.js的实现思路:
第一步,将head中所有外部引入的CSS文件路径取出来存储到一个数组当中;
第二步,遍历数组,并一个个发送AJAX请求;
第三步,AJAX回调后,分析response中的media query的min-width和max-width语法(注意,仅仅支持min-width和max-width),分析出viewport变化区间对应相应的css块;
第四步,页面初始化时和window.resize时,根据当前viewport使用相应的css块
【核心理论】
【文档提示】
在官方文档当中的一些提示:
1、越早的引入respond.js文件,也就越可能避免IE下出现的闪屏。
2、不支持嵌套的媒体查询
3、utf-8的字符编码对respond.js文件的运行有影响
官方API原文:if CSS files are encoded in UTF-8 with Byte-Order-Mark, they will not work with Respond.js in IE7 or IE8.
基本含义就是:utf-8格式的CSS文件字符编码会对插件造成影响。
但是在我使用IE6-8进行测试的时候,都能够正常显示(无论是在css文件中增加charset设置还是在link标签中增加charset设置)。因此,并不是太清楚这个位置bug的含义。
4、跨域可能会出现闪屏(还没有测试,具体情况不详)
【其他插件】
其他的支持响应式布局的插件-css3-mediaqueries-js
css3-mediaqueries-js官方文档和demo都没有,相对于respond.js css3-mediaqueries-js支持几乎所有的media query的语法。会出现闪屏。并不是很推荐使用,虽然能够支持全部的mediaqueries,但min-width和max-width其实就可以满足我们对响应式布局的需要。
【注意】
最近做项目时发现了一个bug:由于动画@keyframe中的@符号,对respond.js造成影响
.
相关推荐
10 三、实现结构与表现分离 11 第六节 div+css的兼容性问题 11 一、div的垂直居中问题 11 二、margin加倍的问题 11 三、浮动ie产生的双倍距离 11 四、IE与宽度和高度的问题 11 五、页面的最小宽度 12 六、DIV浮动IE...
企业模式是可以在 Windows 8.1 更新和 Windows 7 设备的 IE11 上运行的一种兼容性模式,该模式允许网站使用已修改的浏览器配置来呈现内容,其中该浏览器配置旨在模拟 Windows Internet Explorer 8,以避免与在早期...
企业模式是可以在 Windows 8.1 更新和 Windows 7 设备的 IE11 上运行的一种兼容性模式,该模式允许网站使用已修改的浏览器配置来呈现内容,其中该浏览器配置旨在模拟 Windows Internet Explorer 8,以避免与在早期...
修正:IE浏览器下在表格中粘贴会位置错乱问题的修正 修正:IE浏览器下超链接的链接文字,在超链接是“http://”开头的情况下,输入“http://”开头文字无效的修正 修正:UBB模块中style="text-align:*"没转换成...
2、为兼容firefox等非ie浏览器,增加了对ubb编辑器的支持, 3、增加了灾难恢复,用户在遇到浏览器突然关闭等情况时可恢复上次在线输入的日志正文内容。 4、上传部分重新设计,可支持组件上传,用户可分别...
2、为兼容firefox等非ie浏览器,增加了对ubb编辑器的支持,3、增加了灾难恢复,用户在遇到浏览器突然关闭等情况时可恢复上次在线输入的日志正文内容。 4、上传部分重新设计,可支持组件上传,用户可分别管理图片...
3)修正IE浏览器下特殊格式的闪烁特效无效的BUG,现在IE浏览器下闪烁特效用发光字体特效代替! 4)修正二级以上目录调用控件时插入文件的路径转换无效的BUG 5)完善了水印控制的功能,文字水印支持更换字体及颜色! 6)优化...
Chrome Frame 会把最新版的Chrome Webkit 内核和JavaScript 引擎注入到IE中, IE浏览器将获得Chrome的性能和功能 目录 摘要 I ABSTRACT II 专业名词清单 III 第一章 绪论 1 1.1 研究背景与意义 1 1.2国内外相关...
3)修正IE浏览器下特殊格式的闪烁特效无效的BUG,现在IE浏览器下闪烁特效用发光字体特效代替! 4)修正二级以上目录调用控件时插入文件的路径转换无效的BUG 5)完善了水印控制的功能,文字水印支持更换字体及颜色! 6)...
13.4 兼容性和互用性 13.5 可访问性 13.6 安全性 13.7 客户端框架 第14章 Window对象 14.1 计时器 14.2 浏览器定位和导航 14.3 浏览历史 14.4 浏览器和屏幕信息 14.5 对话框 14.6 错误处理 14.7 作为Window对象属性...
13.4 兼容性和互用性 13.5 可访问性 13.6 安全性 13.7 客户端框架 第14章 Window对象 14.1 计时器 14.2 浏览器定位和导航 14.3 浏览历史 14.4 浏览器和屏幕信息 14.5 对话框 14.6 错误处理 14.7 作为Window对象属性...
13.4 兼容性和互用性 13.5 可访问性 13.6 安全性 13.7 客户端框架 第14章 Window对象 14.1 计时器 14.2 浏览器定位和导航 14.3 浏览历史 14.4 浏览器和屏幕信息 14.5 对话框 14.6 错误处理 14.7 作为Window对象属性...
4) 改进了转换相对及绝对路径的算法,此算法除了修正了上一版本无法正确转换全部路径的BUG外,还修正了以前算法在非IE浏览器下可能引起的脚本停止响应的严重BUG。 5) 修改Word文档导入功能生成的图片文件名为...
小试ASP.NET 2.0的兼容性 为 asp.net 2.0 的菜单控件增加 target 属性 ASP.NET 2.0 的内部变化 常见的 ASP.NET 2.0 转换问题和解决方案 Asp.Net2.0无刷新客户端回调 体验.net 2.0 的优雅(1) -- 异步WebService调用...
13.4 兼容性和互用性 326 13.5 可访问性 333 13.6 安全性 334 13.7 客户端框架 339 第14章 window对象 341 14.1 计时器 342 14.2 浏览器定位和导航 343 14.3 浏览历史 345 14.4 浏览器和屏幕信息 346 14.5 对话框 ...
13.4 兼容性和互用性 326 13.5 可访问性 333 13.6 安全性 334 13.7 客户端框架 339 第14章 window对象 341 14.1 计时器 342 14.2 浏览器定位和导航 343 14.3 浏览历史 345 14.4 浏览器和屏幕信息 346 14.5 对话框 ...
13.4 兼容性和互用性 326 13.5 可访问性 333 13.6 安全性 334 13.7 客户端框架 339 第14章 window对象 341 14.1 计时器 342 14.2 浏览器定位和导航 343 14.3 浏览历史 345 14.4 浏览器和屏幕信息 346 14.5 对话框 ...