解決響應式佈局下兼容性的問題

響應式佈局主要是爲了在各類終端中能正常顯示界面，主要是面向的手機、平板等用戶的網站比較多采用，而面向PC端的網站不多使用，由於主流的顯示器都比較大了，並且大多數網站都採用1000寬度，針對手機端等每每又會另外開發一套前端。由於響應式佈局兼容性並很差，在IE8如下的瀏覽器中沒法實現效果。你們寧願採用1000PX如下寬度的頁面。

下面我提供一個辦法解決這個問題。

公司最近新的項目中採用了寬屏1200PX的設計，這樣就產生了一個問題，在1024*768的顯示器上沒法正常顯示。

因此我額外的寫了調整的樣式，針對小於1200PX寬度的顯示屏，統一採用960寬度的樣式。

<link rel="stylesheet" type="text/css" media="screen and (max-width:1200px)" href="css/cloud_960px.css">

針對IE8如下的兼容性，又再次引用了另一個插件：

<!--[if lte IE 8]>
<script type="text/javascript" src="JS/respond.min.js"></script>
<![endif]-->respond.js你們能夠在網上搜索到。應用後，在IE8如下的瀏覽器，若是判斷了是窄屏幕，則會加載調整的樣式。固然，有一個瑕疵，因爲是JS載入後判斷，因此可能會有延遲，稍微閃屏。不過這都是能夠接受。到這裏，你覺得一切貌似都解決了？BUT...你錯了，我上傳後發現另一個坑爹的問題，頁面上引用了瀑布流。載入頁面後瀑布流先應用了樣式，respond載入以後又判斷是窄屏，再次應用了960的樣式，這樣就致使了瀑布流佈局錯亂。解決這個問題的辦法：使用jquery的resize事件，判斷容器寬度變化後，從新執行瀑布流。相似的問題均可以這麼解決。IE6\IE7\IE8測試正常，至於IE9以上支持media query，不須要額外的JS去判斷。