以下两个插件均不支持样式表跨域
页面布局变化时均有500ms左右的延迟
Respond.js
-
Respond.js只支持media query的min-width和max-width属性
-
引入时，样式表放在Respond.js前面，且建议均在head中引入
-
当样式表在域名的子域名或者单独CDN中时，可按以下代码解决跨域问题
假设网站域名为www.domain.com
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Respond JS</title>
<!--子域名的文件-->
<link href="http://static.domain.com/css/common.css" rel="stylesheet"/>
<script src="http://static.domain.com/js/Respond.js"></script>
<link href="http://static.domain.com/html/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
<!--网页所在域名的文件-->
<link href="http://www.domain.com/respond/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
<script src="http://www.domain.com/respond/respond.proxy.js"></script>
</head>
<body>
<p>网页内容</p>
</body>
</html>
css3-mediaqueries.js
-
css3-mediaqueries.js支持media query几乎所有的属性
-
加载速度没有respond.js快
-
若样式表与网站不在一个域名下，可将含有media query的样式单独整理出来，并在head引入IE判断语句，如下：
<!--[if IE 8]>
<script src="http://www.domain.com/respond/css3-mediaqueries"></script>
<link href="http://www.domain.com/respond/.jsrespond-ie8.css" rel="stylesheet" type="text/css" media="all" />
<![endif]-->
js判断
- Respond.js支持的CSS属性有限。
- 由于在项目中我需要根据height进行媒体查询，因此选择了css3-mediaqueries.js插件。但是当应用到项目中时，一旦发生媒体查询整个页面就会卡死崩溃。
- 由于两个插件都不能达到自己项目预期的效果，最后只能自己用js写了一段适配代码。
<!--[if IE]>
<script type="text/javascript">
$(document).ready(function(){
changeSizeIE();
$(window).resize(function(){
changeSizeIE();
})
})
function changeSizeIE(){
if($(window).height() < 745){
//
if($(window).width() <= 1130){
//
}
}
if($(window).height() >= 745 && $(window).height() < 925){
//
if($(window).width() <= 1300){
//
}
}
if($(window).height() >= 925){
//
if($(window).width() <= 1540){
//
}
}
}
</script>
<![endif]-->
网友评论