以下兩個(gè)插件均不支持樣式表跨域
頁面布局變化時(shí)均有500ms左右的延遲
Respond.js
Respond.js只支持media query的min-width和max-width屬性
引入時(shí)，樣式表放在Respond.js前面，且建議均在head中引入
當(dāng)樣式表在域名的子域名或者單獨(dú)CDN中時(shí)，可按以下代碼解決跨域問題
假設(shè)網(wǎng)站域名為www.domain.com
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Respond JS</title>
<!--子域名的文件-->
<link rel="stylesheet"/>
<script src="http://static.domain.com/js/Respond.js"></script>
<link id="respond-proxy" rel="respond-proxy" />
<!--網(wǎng)頁所在域名的文件-->
<link id="respond-redirect" rel="respond-redirect" />
<script src="http://www.domain.com/respond/respond.proxy.js"></script>
</head>
<body>
<p>網(wǎng)頁內(nèi)容</p>
</body>
</html>
css3-mediaqueries.js
css3-mediaqueries.js支持media query幾乎所有的屬性
加載速度沒有respond.js快
若樣式表與網(wǎng)站不在一個(gè)域名下竟稳，可將含有media query的樣式單獨(dú)整理出來，并在head引入IE判斷語句，如下：
<!--[if IE 8]>
<script src="http://www.domain.com/respond/css3-mediaqueries"></script>
<link rel="stylesheet" type="text/css" media="all" />
<![endif]-->
js判斷
- Respond.js支持的CSS屬性有限啊央。
- 由于在項(xiàng)目中我需要根據(jù)height進(jìn)行媒體查詢眶诈，因此選擇了css3-mediaqueries.js插件。但是當(dāng)應(yīng)用到項(xiàng)目中時(shí)瓜饥，一旦發(fā)生媒體查詢整個(gè)頁面就會卡死崩潰逝撬。
- 由于兩個(gè)插件都不能達(dá)到自己項(xiàng)目預(yù)期的效果，最后只能自己用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]-->
