js實現PC端與客戶端自適應

我們可以通過js來判斷頁面對象進行顯示，

在外部引入css設定ID

<link rel="stylesheet" id="css" type="text/css" href="css/pc.css"/>

js代碼如下

var newDoc=document.open("text/html","replace"); //重新加載引入
        window.onload=function(){
            //進入判斷頁面
             changeDivHeight();
        }
        window.onresize=function(){
            //監聽頁面寬度值
             changeDivHeight();
        }
             //執行判斷命令
             function changeDivHeight(){    
                   //獲取body的寬度            
                    var h = document.body.clientWidth 
                    if(h < 800)
                    {
                    //移動端    
                    document.getElementById('css').href='css/web.css'  //客戶端
                    
                    newDoc.close();
                    }
                    else
                    {
                    //PC端
                    document.getElementById('css').href='css/pc.css'  //PC端
                    newDoc.close();
                    }
        }

我用的方法是通過js來判斷頁面的高度來定義大小，我這邊設定是寬度800px，超過800我這邊設定為PC端頁面，引入pc.css，寬度小於800px，我這邊設定為web端也就是手機進行顯示引入web.css。