探討兼容IE低版本的PC端響應式布局

http://www.jiangweishan.com/article/lowIeResposive.html

 

響應式布局，oh my god！！有點醉了，感覺是老生常談的話題了。雖然已經談過很多了，但這次也很有必要拿出來探討下。為什么呢？往下看唄。。。

最 近在折騰公司首頁的改版，設計師設計了三個版本，寬度分別為1600px，1200px，960px。看到這三個尺寸的設計，很明顯需要做PC端的響應 式，我們都知道針對IE9+和其他高富帥瀏覽器的響應式，使用Media Query輕松搞定。至於IE8以下的，平常項目中都是設置一個最小寬度，屏幕縮小的時候狀態欄出現滾動條。現實並不是我們想象的那么簡單，我們需要默認 顯示1600px的寬度，那么在IE8以下的這種方法不太合適了，因為屏幕太寬。

於是打開谷歌、百度，瘋狂搜索，逛 了一圈。給我的總結：都是圍繞2個處理方法，就是要用到第三方插件庫：

第一種：https://github.com/livingston/css3-mediaqueries-js

第二種：https://github.com/scottjehl/Respond

具體方法我們可以打開連接查看相關應用方法，這里就不啰嗦了。使用過后的感覺：代碼太臃腫了，效果也一般，在IE7/8容易出現閃屏情況等等，亂七八糟問題，暫且放棄。

心有不甘，繼續seaching，最后發現淘寶和天貓的新版首頁也用到了PC端響應式，進行了一番研究，他們用的是取屏幕寬度，然后通過resize方法來實現PC端響應式，代碼要比上面說的方法簡潔，暫采用吧，這里我想分享下：

1. $(window).resize(function () {
2.     screenRespond();
3. });
4. screenRespond();
5. function screenRespond(){
6.   var screenWidth = $(window).width(); 
7.   if(screenWidth <= 1800){
8.     $("body").attr("class","w1800");
9.   }
10.   if(screenWidth <= 1400){
11.     $("body").attr("class","w1400");
12.   }
13.   if(screenWidth > 1800){
14.     $("body").attr("class","");
15.   }
16. }

上面是我在項目中使用的方法，雖然跟淘寶天貓有些不同，但是大同小異，核心一樣。定義一個函數，然后執行，最后屏幕變化的時候resize，根絕不同尺寸，我們給body新增一個class，用這個父級class控制相應尺寸內容響應式，看下我從項目中截取的CSS代碼

1. /* response */
2. .w1800 .screen-wid{width:1200px}
3. .w1800 .p-top-lin,.w1400 .p-top-lin{border:solid #e5e5e5;border-width:1px 0 0}
4. .w1800 .dchart-conut{width:100px}
5. .w1800 .dchart-conut p{padding:8% 0}
6. .w1400 .screen-wid{width:960px}
7. .w1400 .header_fixed .menu-navbox{margin-left:8%}
8. .w1400 .header_fixed .menu-navbox li{padding:17px 1.2%}
9. .w1400 .header_fixed .menu-slide-down li{padding:0}
10. .w1400 .menu-navbox{margin-left:25%}
11. .w1400 .menu-navbox li{padding:17px 2%}
12. .w1400 .menu-navbox .none-mar{padding-right:0}
13. .w1400 .menu-slide-down li{padding:0}
14. .w1400 .menu-navbox a{font-size:15px}

一個龐大的首頁響應式【兼容ie7/8】，用這樣的代碼輕松搞定。考慮諸多方面的因素，我認為這是最好的方法