1、使用js判斷載入不同css

但是這種方法只有最開始的時候會判斷，如果你拖動瀏覽器大小是不會發生改變的

<link rel="stylesheet" type="text/css" id="links" href="../css/m_wuqinglan.css"/>
        <script type="text/javascript">
            window.οnlοad=function(){ 
                var sc=document.getElementById("links"); 
                    if(window.screen.width>1024) //獲取螢幕的的寬度 
                    { 
                        sc.setAttribute("href","../css/pc_wuqinglan.css"); //電腦
                    } 
                    else{ 
                        sc.setAttribute("href","../css/m_wuqinglan.css"); //手機
                    } 
            }
        </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、直接媒體查詢然後寫樣式

@media only screen and (max-width: 1024px) {
    .div1{
        width:50%;
    }
    .div2{
        width:50%;
    }
    .div3 {
        width:50%;
    }
}

@media only screen and (min-width: 1024px) {
    .div1{
        width:100%;
    }
    .div2{
        width:100%;
    }
    .div3 {
        width:100%;
    }
}

使用 @media 查詢，你可以針對不同的媒體型別定義不同的樣式。

@media 可以針對不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，@media 是非常有用的。

當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。