【前言】
之前讲解响应式布局时,只是举了几个简单例子。后直接开始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造成影响
.
相关推荐
c语言学习
人脸识别项目源码实战
人脸识别项目源码实战
本图书进销存管理系统管理员功能有个人中心,用户管理,图书类型管理,进货订单管理,商品退货管理,批销订单管理,图书信息管理,客户信息管理,供应商管理,库存分析管理,收入金额管理,应收金额管理,我的收藏管理。 用户功能有个人中心,图书类型管理,进货订单管理,商品退货管理,批销订单管理,图书信息管理,客户信息管理,供应商管理,库存分析管理,收入金额管理,应收金额管理。因而具有一定的实用性。 本站是一个B/S模式系统,采用Spring Boot框架,MYSQL数据库设计开发,充分保证系统的稳定性。系统具有界面清晰、操作简单,功能齐全的特点,使得图书进销存管理系统管理工作系统化、规范化。本系统的使用使管理人员从繁重的工作中解脱出来,实现无纸化办公,能够有效的提高图书进销存管理系统管理效率。 关键词:图书进销存管理系统;Spring Boot框架;MYSQL数据库
基于动态规划和模型预测控制的并联混合电动汽车最佳控制 简介:利用动态规划,使用模型预测控制,实现对并联混合动力电动汽车的最佳控制,并降低总体成本函数 使用动态规划可以实现混合动力电动汽车的优化控制 混合动力电动汽车的模型预测控制是通过使用动态规划在缩短的时域内实现的 代码为纯matlab脚本,附带说明电子文档 ,并联混合电动汽车; 动态规划; 模型预测控制; 最佳控制; 总体成本函数; Matlab脚本。,动态规划与模型预测控制在并联混合动力电动汽车的最优控制策略
人脸识别项目实战
2025 DeepSeek技术全景解析-重塑全球AI生态的中国力量.pdf
能够爬取非会员视频和音频资源,可通过ffmpeg等工具将视频资源和音频资源合并
基于差分进化算法DE的机器人路径规划 本产品基于优化的差分进化算法,专为机器人山地路径规划而设计 通过模拟差分进化过程中的变异、交叉与选择机制,算法能够智能探索并确定最优行进路线,全面考量路径长度、能量消耗及地形适应性 优化之处在于融合了动态差分权重与精英保留策略,显著增强了算法的搜索效率和求解质量,有效规避了早熟收敛的风险 该算法在山地这一复杂且多变的自然环境中展现出卓越性能,完美适配于机器人探险、山地救援、环境监测等多种应用场景 我们矢志为用户提供卓越、稳健的机器人路径规划方案,推动各类山地作业迈向更为精确与高效的路径规划新时代 ,差分进化算法DE; 机器人路径规划; 山地路径规划; 算法优化; 早熟收敛风险规避; 山地探险应用场景; 环境监测场景。,DE算法赋能机器人,优化山地路径规划方案
情侣游戏情侣飞行棋10元真心话大冒险情侣情趣骰子php源码 ----- 程序特色 ----- 1、完整的分销制度,可自定义多种不同的返佣比例 2、支持情侣飞行棋、情趣骰子,多种等级 3、无感微信自动授权登录,支持微信第三方授权登录 4、完全开源无加密
HeidiSQL的12.2.0.6576安装压缩包
监护人,小孩和玩具数据集 4647张原始图片 监护人 食物 孩子 玩具 精确率可达85.4% yolov5pytorch格式
本课程是 PHP 进阶系列之 Swoole 入门精讲,系统讲解 Swoole 在 PHP 高性能开发中的应用,涵盖 协程、异步编程、WebSocket、TCP/UDP 通信、任务投递、定时器等核心功能。通过理论解析和实战案例相结合,帮助开发者掌握 Swoole 的基本使用方法及其在高并发场景下的应用。 适用人群: 适合 有一定 PHP 基础的开发者、希望提升后端性能优化能力的工程师,以及 对高并发、异步编程感兴趣的学习者。 能学到什么: 掌握 Swoole 基础——理解 Swoole 的核心概念,如协程、异步编程、事件驱动等。 高并发处理——学习如何使用 Swoole 构建高并发的 Web 服务器、TCP/UDP 服务器。 实战项目经验——通过案例实践,掌握 Swoole 在 WebSocket、消息队列、微服务等场景的应用。 阅读建议: 建议先掌握 PHP 基础,了解 HTTP 服务器和并发处理相关概念。学习过程中,结合 官方文档和实际项目 进行实践,加深理解,逐步提升 Swoole 开发能力。
机器人先进视觉赛-基于深度学习yolov8的3D识别项目源码含gui界面(最新发布).zip 实现机器人的3D目标识别和分割功能 支持深度图像的处理和分析 【资源详情说明】 【1】该项目为近期精心打造开发,完整代码。同时,配套资料一应俱全,涵盖详细的设计文档 【2】项目上传前源码经过严格测试,在多种环境下均能稳定运行,功能完善且稳定运行,技术研究、教学演示还是项目实践,都能轻松复现,节省时间和精力。 【3】本项目面向计算机相关专业领域的各类人群,对于高校学生,可作为毕业设计、课程设计、日常作业的优质参考;对于科研工作者和行业从业者,可作为项目初期立项演示,助力快速搭建原型,验证思路。 【4】若具备一定技术基础,可在此代码上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 【5】小白,在配置环境或运行项目时遇到困难,可提供远程指导和全方位技术支持。 欢迎下载学习本项目资源,期待与你共同探讨技术问题,交流项目经验!
Matlab实现TSO-XGBoost多变量回归预测 Matlab实现TSO-XGBoost多变量回归预测,金枪鱼算法优化XGBoost多变量回归预测 1.data为数据集,7个输入特征,1个输出特征 2.MainTSO XGboost.m为主程序文件,其他为函数文件,无需运行 3.命令窗口输出R2、MAE、MAE和RMSEP等评价指标,可在下载区获取数据和程序内容 注意程序和数据放在一个文件夹,文件夹不可以XGBoost命名,因为有函数已经用过,运行环境为 Matlab2018及以上,预测效果如下 ,TSO-XGBoost; 多变量回归预测; Matlab实现; 金枪鱼算法优化; 评价指标; 预测效果; 文件夹结构; 运行环境,Matlab中TSO-XGBoost多变量回归预测优化实践
实时音视频SRT协议中文完整版
学习WiFi,入手资料
c语言学习
jl5104开发板的代码,sdk
二级建造师电子证照.ofd.zip