有時候你需要把同一個頁面在手機和pc同時打開，其中有一個辦法就是判斷不同分辨路加載不同的css

小編總結了幾種分別加載css的方法：

1.比較復雜的使用js判斷加載不同css （親測可用）

但是這種方法只有最開始的時候會判斷，如果你拖動瀏覽器大小是不會發生改變的（當然如果喜歡拖著玩的話）

 1 <link rel="stylesheet" type="text/css" id="links" href="../css/m_wuqinglan.css"/>
 2         <script type="text/javascript">
 3             window.onload=function
 
(){ 
 4                 var sc=document.getElementById("links"); 
 5                     if(window.screen.width>1024) //獲取屏幕的的寬度 
 6                     { 
 7                         sc.setAttribute("href","../css/pc_wuqinglan.css"); //電腦
 8                     } 
 9                     else{ 
10                         sc.setAttribute("href","../css/m_wuqinglan.css"); //
 
手機
11                     } 
12             }
13         </script>

2.比較簡單帥氣的用媒體查詢加載對應css

會隨著你的拖動窗口大小而執行

//其中 media 是媒體查詢的範圍，當最大寬度是1200，這裏就是手機平板一下的尺寸 加載手機css ，反之電腦css
<link rel="stylesheet" type="text/css" href="../css/m_wuqinglan.css" media="screen and (max-width:1200px)"/>
<link rel="stylesheet" type="text/css" href="../css/pc_wuqinglan.css" media="screen and (min-width:1201px)"/>
 

3.當然還有最刺激的方式，那就是直接媒體查詢然後寫樣式

 1 @media only screen and (max-width: 1024px) {
 2     .div1{
 3         width:50%;
 4     }
 6     .div2{
 7         width:50%;
 8     }
10     .div3 {
11         width:50%;
12     }
13 }
14 
15 @media only screen and (min-width: 1024px) {
16     .div1{
17         width:100%;
18     }
20     .div2{
21         width:100%;
22     }
24     .div3 {
25         width:100%;
26     }
27 }

當然要做ie兼容的寶貝們，媒體查詢是不支持ie9以下的（暫時是這樣），當然可以依靠第三方的兼容方式

CSS響應式：根據分辨路加載不同CSS的幾個方法，親測可用