ie兼容響應式布局的實現總結

雖然說響應式設計的理想狀態是，需對pc/移動各種終端進行響應；但是現實是高分辨率的pc端與手機終端屏幕相差太大，像電商這樣有大量圖片和文字信息的同時排版要求精準的頁面，設計一個同時適應高分辨率pc又適合小尺寸的手機終端是挑戰；同時高分辨率下pc頁面信息量巨大，對于手機端用戶是否需要，也許會造成帶寬浪費;再者手機終端和pc終端的用戶操作習慣也相差甚大，這種多圖多信息量要求精準的頁面，設計出來恐怕會是2個完全不同的版本，也許各自維護更方便。由于業務形態原因，隨著用戶分辨率的提高，1024×768已不再是主流，寬屏用戶比例越來越大，因此我們的響應式考慮如何充分利用PC 用戶設備上更多空間而設計。下圖為淘寶用戶的屏幕分辨率和瀏覽器比例，鑒于ie8-瀏覽器目前占比約70%，media query的ie8-兼容迫于現實還是要做，淚……

media query簡介

miedia query有2種引入方式：

1.link標簽方式

<link type="text/css" media="screen" href="sans-serif.css">
<link type="text/css" media="print" href="serif.css">

2.css方式

@media screen {  * { font-family: sans-serif } }

媒體類型有很多種：‘aural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’、‘embossed’、 ‘speech’、’3d-glasses’，但最常用的是screen和print,對于前端們來講最常用的應該只有screen了。應用于所有媒體類型可以用all，省略不寫默認就是all。media query支持很多表達式，常用的如下，完整的查看這里：

@media all and (min-width: 400px) and (max-width: 700px) { } 
@media all and (orientation: portrait) {  } 
@media and (min-device-width: 800px) { }

利用media query可以輕松實現不同屏幕寬度時切換不同的頁面布局，但是很不幸ie8及以下都還不支持media query，于是開始了下面的media query兼容之旅……

目前實現media query ie兼容的庫比較成熟的有respond.js和css3-mediaqueries-js；它們各有優劣，respond.js 壓縮后1k，只實現了media query中最常用的min-width max-width的兼容；css3-mediaqueries-js基本實現了所有css3規范中的media query特性的兼容，所以導致壓縮有16k，測試反饋其性能遠低于respond.js;不過確實一淘首頁2次響應式設計均只需用到max-width 和min-width，Modernizr 和 H5BP 也均推薦使用respond.js,下面具體看看它們的實現吧

respond.js源碼分析

使用方式

官方demo地址：http://scottjehl.github.com/Respond/test/test.html

在css中正常用 min/max-width media queries

@media screen and (min-width: 480px) {     ...styles for 480px and up go here   
}

引入respond.min.js，但要在css的后面（越早引入越好，在ie下面看到頁面閃屏的概率就越低，因為最初css會先渲染出來，如果 respond.js加載得很后面，這時重新根據media query解析出來的css會再改變一次頁面的布局等，所以看起來有閃屏的現象）

實現思路

1.把head中所有的css路徑取出來放入數組
2.然后遍歷數組一個個發ajax請求
3.ajax回調后僅分析response中的media query的min-width和max-width語法，分析出viewport變化區間對應相應的css塊

4.頁面初始化時和window.resize時，根據當前viewport使用相應的css塊。

window.matchMedia = window.matchMedia || (function(doc, undefined){var bool,docElem = doc.documentElement,refNode = docElem.firstElementChild || docElem.firstChild,// fakeBody required forfakeBody = doc.createElement_x('body'),div     = doc.createElement_x('div');div.id = 'mq-test-1';div.style.cssText = "position:absolute;top:-100em";fakeBody.style.background = "none";fakeBody.appendChild(div);return function(q){div.innerHTML = '-';docElem.insertBefore(fakeBody, refNode);bool = div.offsetWidth == 42;docElem.removeChild(fakeBody);return { matches: bool, media: q };};
})(document);
//檢測是否支持media query,檢測css是否有效的方法都差不多，創建一個元素應用該css后檢測元素寬度，然后清除該元素。
.......
if( !!href && isCSS && !parsedSheets[ href ] ){// selectivizr exposes css through the rawCssText expandoif (sheet.styleSheet && sheet.styleSheet.rawCssText) {//sheet.styleSheet.rawCssText看不懂，原來是方便selectivizr和respond.js聯用，http://selectivizr.com/tests/respond///selectivizr的作用是 CSS3 selectors for IE；約定將原csstext放在styleSheet的link上的擴展屬性rawCssText上；這里如果聯用selectivizr可以少次ajax請求translate( sheet.styleSheet.rawCssText, href, media );parsedSheets[ href ] = true;} else {if( (!/^([a-zA-Z:]*\/\/)/.test( href ) && !base)|| href.replace( RegExp.$1, "" ).split( "/" )[0] === win.location.host ){requestQueue.push( {href: href,media: media} );}}
}
.......
其余的代碼就是ajax實現和translate media query的max-width min-width的邏輯了；可以看出這里必須依賴ajax請求css路徑才能得到css文件中的mediaquery的內容，那ajax的跨域問題就要 解決了；由于我們的靜態資源都是要放cdn的，respond.js也給出了跨域方法，即引入代理頁面。//把cross-domain/respond-proxy.html 放到cdn上
//把cross-domain/respond.proxy.gif 放到當前域服務器上
"http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />"/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />"/path/to/respond.proxy.js">
這里ajax跨域實現是通過代理頁面將獲取到的css，再通過window.name通信實現；如在respond.proxy.js中function checkFrameName() {var cssText;try {cssText = iframe.contentWindow.name;var now = new Date().getTime(),useTime = now - initTime;alert('獲取css耗時:'+ useTime + 'ms');}catch (e) { }if (cssText) {……//銷毀之前用于通信的iframe,后續回調callbackcallback(cssText);}else{win.setTimeout(checkFrameName, 100);}
}
win.setTimeout(checkFrameName, 500);//500ms后確認內部iframe的name值是否傳遞過來，后續再更新當前viewport該用的css。

因為實現跨域代理的問題，初始化頁面時應用上全部css耗時較長，以下光測試從開始執行該js文件到css取回調用之前的耗時為500ms-515ms之間（每次刷新結果不一樣），ie8下測試結果如下

測試結果發現，刷新頁面后會有明顯的閃屏（以該測試demo為例，一開始頁面背景是黑色的，這是默認css中的，跨域js執行完成后分析出 media query中的該viewport尺寸下應該應用red的背景，所以又變成紅色），間隔時間為500ms以上。所以體驗不是很好，而且該場景中ajax跨域目前已經沒有更好的實現方式，500ms間隔的閃屏避免不了。

同時因為是ajax請求css,所以會因為響應式而額外產生一個請求，好在之前css請求過一遍，這次ajax請求是讀取瀏覽器緩存中的，如下圖中fiddler的檢測結果中的第三個請求和第六個請求：

respond.js總結

優點：壓縮后僅1k,不跨域時性能ok，只需引入respond.js通用易用
缺點：僅支持media query的min-width和max-width（用于響應式夠用）；支持跨域，雖然配置有點麻煩，實現跨域代價高而且有閃屏體驗欠佳。

css3-mediaqueries-js源碼分析

css3-mediaqueries-js官方文檔和demo都沒有，相對于respond.js css3-mediaqueries-js支持幾乎所有的media query的語法，訪問測試demo

實現邏輯

其實現邏輯和respond.js差不多，只是更加支持的media query更加全面，同時支持內聯style，支持各種寬度單位(em|ex|px|in|cm|mm|pt|pc),但是這里的初始化是在 domready后執行，為了讓用戶感覺不出頁面有閃屏（之前應用初始化樣式然后js提取media query中的樣式再覆蓋一遍）現象，這里的實現是先將html移出可視區域外，等解析完media query后再重置回來，但實際目測感覺稍有閃屏（當然這里的測試是測試body背景色，移出可視區域外不管用，當然絕大部分響應式場景是適用的），實現如下：

// prevent jumping of layout by hiding everything before painting 先將html移出可視區域外
var docEl = document.documentElement;docEl.style.marginLeft = '-32767px';// make sure it comes back after a while 異常處理，萬一獲取mediaquery css失敗，重置回來
setTimeout(function () {docEl.style.marginTop = '';
}, 20000);……// return visibility after media queries are tested 生效后重新可見
cssHelper.addListener('cssMediaQueriesTested', function () {// force repaint in IE by changing widthif (ua.ie) {docEl.style.width = '1px';}setTimeout(function () {docEl.style.width = ''; // undo widthdocEl.style.marginLeft = ''; // undo hidevar now = new Date().getTime();var useTime = now - initTime;alert('media query生效時間:'+useTime+'ms');}, 0);// remove this listener to prevent following executioncssHelper.removeListener('cssMediaQueriesTested', arguments.callee);
});

其余實現和respond.js基本一致，也需要使用ajax，所以css3-media-queries.js本身不支持跨域，當然非要支持跨域也可以，也可以像respond.js一樣使用代理頁面跨域即可，但也會出現閃屏的現象。還是先看看不跨域情況下，大多數人為什么選擇 respond.js，主要原因還是完美支持的media query特性導致壓縮后16K，下載和執行時間都遜于respond.js，下面是同域下在ie8的測試結果（耗時140ms而respond.js僅 15ms）

css3-mediaqueries-js總結

優點：1、基本支持所有css3中的media query語法
缺點：1、不支持跨域（如cdn），就算支持了跨域也存在閃屏現象；2、和respond.js對比性能較差

全局切換class

因為css/js需要放到cdn上面，需要跨域，css3-mediaqueries-js不支持跨域，respond.js支持跨域但是實現跨域后性能較差，有閃屏體驗也差，而且配置麻煩，不方便各個業務通用。對比respond.js和css3-mediaqueries-js可知，實現響應式應用min-width和max-width足矣；同時模擬media query的效果只需要在2個關鍵時間點根據viewport切換css（初始化頁面時和window.resize）即可。所以可以選擇切換css link，可以動態切換css塊,也可以切換class

切換css link（優點：邏輯清晰；缺點：增加請求數，維護麻煩，如修改一個模塊涉及到3個尺寸的響應,至少需要改3個文件）

"stylesheet" type="text/css" media="screen and (max-width: 990px)" href="respond750.css&uuot;>
"stylesheet" type="text/css" media="screen and (max-width: 1200px)" href="respond990.css">

切換內聯css塊(respond.js和css3-mediaqueries-js就是通過js分析出media query然后自動根據當前viewport切換css塊，這個理想環境下是最好的，自動分析只管寫media query，但是依賴ajax獲取css內容，跨域實現成本高體驗也不好)
全局切換class(特別是初始化頁面時最好在頁面內容未開始渲染之前切換class，不然會出現像韓國naver購物頻道在寬屏時刷新效果，刷新時內容由中間向外偏），特定viewport用特殊全局class標記，響應式樣式繼承在該class下，實現大致如下：

實現方式

@media screen and (min-width: 990px) {.content {width: 990px;color: red;}
}
@media screen and (min-width: 1200px) {.content {width: 1200px;color: green;}
}
.w990 .content {width: 990px;color: red;
}
.w1200 .content {width: 1200px;color: green;
}
"w990">
"content">content

全局切換class這種方式維護也是個問題，首先是js分散2處，body最上方切換全局class，domready時 window.resize時切換class,同時響應式尺寸增加時，需要改變js判斷條件；再看css的維護，media query一份，加全局class一份相同的，維護需要同時修改2次，初期media query幾十行也能接受，但是后來改版media query幾百行，這樣維護成本就大大增加了，全局class和media query copy相同的代碼引入less解決，使用方法如下：

#channels {.w1200() {.etao-channels {padding: 170px 0 0 30px;li {margin-right: 25px;}}}.w990() {.etao-channels {padding: 25px 0 0 15px;li {margin-right: 8px;}}.w750() {.etao-channels {padding: 5px 0 0 5px;li {margin-right: 5px;}a {color: #333;}}}
}
// 這樣只需維護上面一處代碼即可
#channels > .w1200;
@media (max-width: 1119px) {#channels > .w990;
}
@media (max-width: 989px) {#channels > .w750;
}
.w990 {#channels > .w990;
}
.w750 {#channels > .w750;
}