<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>@keyframes嵌套在@media中IE浏览器兼容问题</title>
<script src="./jquery-1.12.0.min.js"></script>
<script type = "text/javascript">
function myBrowser(){
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
if (userAgent.indexOf("Firefox") > -1) {
return "FF";
} //判断是否Firefox浏览器
if (userAgent.indexOf("Chrome") > -1){
return "Chrome";
}
if(!!window.ActiveXObject || "ActiveXObject" in window || (userAgent.indexOf("Trident") > -1)){
return "IE";
}//判断是否IE浏览器
}
if(myBrowser() == "IE") {
$("head").append("<link rel = 'stylesheet' href = './for_ie.css'>");
}
</script>
</head>
<style>
/*宽度大于400px*/
@media (min-width: 400px) {
.box{
-webkit-animation: spin 1s infinite;
animation: spin 1s infinite;
}
@-webkit-keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
background-color: blue;
}
}
@-moz-keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
background-color: blue;
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
background-color: blue;
}
}
}
/*宽度小于400px*/
@media (max-width: 400px) {
.box{
-webkit-animation: spin 1s infinite;
animation: spin 1s infinite;
}
@-webkit-keyframes spin {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
background-color: red;
}
}
@-moz-keyframes spin {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
background-color: red;
}
}
@keyframes spin {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
background-color: red;
}
}
}
.box {
width: 50px;
height: 50px;
background-color: #000;
}
</style>
<body>
<div class="box"></div>
<h4>针对ie的keyframes在@media中的兼容问题</h4>
<fieldset>
<legend>问题描述</legend>
@keyframes嵌套于@media中时，其余浏览器均显示正常，而ie不识别
</fieldset>
<fieldset>
<legend>解决方法</legend>
1.在动画不是特别多的情况下可以使用for_ie.css文件中的写法，给每个分辨率下写不同的动画名；</br>
优点：减少浏览器加载文件的次数，有利于提高浏览器渲染速度</br>
缺点：在每个分辨率下都得加载不同的keyframe动画名，命名都不能相同，起不同的名字较麻烦</br>
2.在动画效果特别多的页面适合给IE单独引入它的样式文件，如目前的例子</br>
优点：针对不同浏览器使用不同样式，keyframe动画命名简单，样式清晰明了</br>
缺点：通过js判断后加载不同css文件会阻断浏览器渲染，延缓浏览器渲染速度</br>
<strong>推荐使用第1种</strong>
</fieldset>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<me
阅读背景：
@keyframes嵌套在@media中IE浏览器兼容问题
来源：互联网
分享到：
