Respond.js在IE8失效原因分析
最近在專案中使用了Bootstrap，而且專案要求相容IE8。專案中使用bootstrap的預設樣式，然後在此基礎上另外使用一個css檔案編寫自定義的樣式。原本以為在頁面中加入Respond.js可以讓Bootstrap的樣式在IE8下自動解析出來，但是發現有的自定義css起作用了，有的沒有起作用（非CSS3特效），非常奇怪。
上網查詢Respond失效原因，非常多，總結起來有這幾點：
- 跨域問題
- CSS檔案和js檔案標籤書寫順序
- 檔案訪問方式（http://還是file：//）
- 樣式是否放在CSS檔案中
這幾點都不符合我實際的環境，可以排除，這些方法都不適用。那問題出在什麼地方？
each media query block is appended to the head in order via style elements, and those style elements are enabled and disabled (read: appended and removed from the DOM) depending on how their min/max width compares with the browser width.
意思就是Respond.js自動將帶有@media的css塊解析後放到html檔案的head中，讓其在渲染中起作用。看到這裡基本上就明白了到底是什麼地方導致自定義樣式不起作用了。
原因在於bootstrap中很多樣式都是寫在@media的塊中的，比如：
/* quick sidebar top position fix for mobile view */
@media (max-width: 480px) {
/* 480px */
.page-quick-sidebar-wrapper {
top: 92px;
}
.page-quick-sidebar-toggler 假如在自定義css中改寫這段的效果，原來的寫法是：
.page-quick-sidebar-wrapper {
top: 100px;
}
.page-quick-sidebar-toggler {
top: 100px;
}雖然自定義的css文件標籤是放在後面的，但是實際上並沒有見效，因為respond將上述@media中的css樣式提取並放置在html的head中，相當於是放置在自定義樣式的後面了，當然無法起作用。正確的寫法是：
@media (max-width: 480px) {
/* 480px */ 在自定義的css中也需要使用@media塊包裹起來，這樣Respond.js在解析時也會自動將自定義的樣式與預設樣式按照順序放在head中，顯示效果就正確了。
實際驗證一下，程式碼結構如下：
+--respond.html
|--1.css
|--2.cssrespond.html程式碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="1.css">
<link rel="stylesheet" type="text/css" href="2.css">
<script src="jquery.min.js"></script>
<!-- HTML5 Shim and Respond.js 用來支援IE8上的media queries和HTML5元素 -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="respond.min.js"></script>
<![endif]-->
</head>
<body>
</body>
1.css程式碼：
@media screen and (min-width: 300px) {
body {
background-color:lightblue;
}
}
2.css程式碼：
@media screen and (min-width: 300px) {
body {
background-color:lightgreen;
}
}
經過測試，頁面背景為淺綠色，測試結果：
證明respond.js正確執行，如果把2.css程式碼更改為：
body {
background-color:lightgreen;
}頁面背景為淺藍色，測試結果：
總結：以後在使用Bootstrap之類樣式時，如果要自定義樣式，最好檢視清楚對應的樣式在Bootstrap的預設樣式檔案中是否使用了@media，如果是的話，最好也使用相同的媒體查詢條件將自定義樣式包裹起來，以免在使用Respond.js相容低版本IE瀏覽器時出現樣式失效的情況。