一，限定某些瀏覽器版本才能執(zhí)行的語句（摘自互聯(lián)網(wǎng)鏈接已貼出）

http://www.weste.net/2013/8-9/93104.html

<!--[if IE 7]> 僅IE7可識別 <![endif]-->

?<!--[if lt IE 7]> IE7以及IE7以下版本可識別 <![endif]-->?

<!--[if gte IE 7]> IE7以及IE7以上版本可識別 <![endif]-->

?<!--[if IE 8]> 僅IE8可識別 <![endif]-->

?<!--[if IE 9]> 僅IE9可識別 <![endif]-->

二、HTML5 Shiv – 讓該死的IE系列支持HTML5。

http://www.daqianduan.com/2831.html

<!--[if IE]>

<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>

< ![endif]-->

將上代碼復制到head部分，記住一定要是head部分（因為IE必須在元素解析前知道這個元素，所以這個js文件不能在其他位置調用，否則失效）

css里面加上這段：

/*html5*/

article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

主要是讓這些html5標簽成塊狀，像div那樣。

三、Respond.js讓IE6-8支持CSS3 Media Query

http://caibaojian.com/respondjs.html

Respond.js讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢

一、@media screen and (min-width: 480px){? ? ? ?

...styles for 480px and up go here? ? }

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

實現(xiàn)思路

1.把head中所有<link rel=“sheetstyle” href=“xx”/>的css路徑取出來放入數(shù)組?

2.然后遍歷數(shù)組一個個發(fā)ajax請求?

3.ajax回調后僅分析response中的media query的min-width和max-width語法，分析出viewport變化區(qū)間對應相應的css塊?

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

總結

1、優(yōu)點：壓縮后僅1k,不跨域時性能ok，只需引入respond.js通用易用

2、缺點：僅支持media query的min-width和max-width（用于響應式夠用）；支持跨域，雖然配置有點麻煩，實現(xiàn)跨域代價高而且有閃屏體驗欠佳。