適配方案
目前來看，適配從設備來分大致分兩種，一種是手機端適配，另一種是PC端適配。本次教程主要講PC端適配。
一，為什麽講述本次教程？
昨天不是很忙，在閑下來的時候看京東，淘寶，天貓的前端代碼，當我改變瀏覽器的寬度時候，內容自動適配。感覺很好奇，就查看他們的css樣式。
結果發現一個比較好的方案。這也是今天我要講述的適配方案。
二，這次教程需要用到的技術是什麽？
首先你要了解css權重,比如
.nav span{
color:#999;
}
.nav .span{
color:#ccc;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css權重</title>
<style type="text/css">
.nav span{
color:#999;
}
.nav .span{
color:#ccc;
}
</style>
</head>
<body>
<div class="nav">
<span class="span">hello css</span>
</div>
</body>
</html>
這兩行代碼那個權重更高，測試一把就知道啦！！！
哈哈相信知道css權重的童鞋會說，太簡單了。不知道的呢！肯定還不知道怎麽回事？
不了解css權重的可以看看大漠老師的講解很全面：http://www.w3cplus.com/css/css-specificity-things-you-should-know.html
其次是規劃自己的css樣式，利用css權重來改變樣式
舉個例子：
/**
*.Lk_medium
* 中等寬度1190
*
*.Lk_mini
* 最小尺寸990
* */
.warp{ width: 1810px; margin: 0 auto; height: 200px; background-color: #20A0FF; } .Lk_medium .warp{ width: 1100px; margin: 0 auto; background-color: red; } .Lk_mini .warp{ width: 900px; margin: 0 auto; background-color: #717FA5; }
當瀏覽器訪問頁面時，默認加載的是warp 樣式
當你改變瀏覽器的大小時，我們可以用js動態改變 html 或者body 的class樣式。
這樣的話，頁面就按照它的大小去加載相形的css
上html與js代碼
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css權重</title> 6 <style type="text/css"> 7 .warp{ 8 width: 1810px; 9 margin: 0 auto; 10 height: 200px; 11 background-color: #20A0FF; 12 } 13 .Lk_medium .warp{ 14 width: 1100px; 15 margin: 0 auto; 16 background-color: red; 17 } 18 .Lk_mini .warp{ 19 width: 900px; 20 margin: 0 auto; 21 background-color: #717FA5; 22 } 23 </style> 24 <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script> 25 <script type="text/javascript"> 26 $(function(){ 27 function setwidth(){ 28 var _width=$(window).width(); 29 $("body").removeClass("Lk_medium").removeClass("Lk_mini"); 30 if(_width>=1905){ 31 32 }else if(_width>=1190){ 33 $("body").addClass("Lk_medium"); 34 }else if(_width>=990){ 35 $("body").addClass("Lk_mini"); 36 } 37 } 38 setwidth(); 39 $(window).resize(function(){ 40 setwidth(); 41 }) 42 }) 43 </script> 44 </head> 45 <body> 46 <div class="warp"> 47 48 </div> 49 </body> 50 </html>View Code
如圖所示：
三，跟其他適配方案做對比
[email protected]，為什麽我沒有講？
圖上：想必這是最好的答案。
2.本方案代碼冗余太多，如果把css壓縮，我相信目前這種方案還是很好的選擇。
3.兼容性目前來看可以甩掉媒體查詢幾條街
4.如果不考慮低版本的瀏覽器完全不用考慮此方法哈！！！
希望您看完此次教程對你有一點幫助，菜鳥前端-小小坤期待下次你的光臨小舍
適配方案