以下兩個插件均不支持樣式表跨域
頁面布局變化時均有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 rel="stylesheet"/>
<script src="http://static.domain.com/js/Respond.js"></script>
<link id="respond-proxy" rel="respond-proxy" />
<!--網頁所在域名的文件-->
<link 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 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]-->
