移動端的佈局方案

1、使用 媒體查詢+rem單位

原理：利用媒體查詢檢測設備的特性，根據設備來改變根節點的字體大小
實現步驟：
（1）通過媒體查詢來改變根節點的字體大小

@media all and (min-width: 320px) {
     html {
            font-size: 32px;
        }
}
@media all and (min-width: 375px){
    html{
        font-size: 37.5px;
    }
}

（2）頁面當中元素的佈局都用rem單位，就能達到適配的狀態

div {
    width: 10rem;
    height: 100px;
    background: red;
}

缺點：不能精細的適配到每一個設備，代碼量較大
具體詳解點擊查看

2、使用vw單位 + rem單位佈局

原理：屏幕大小變化的時候，用vw作爲單位的值也會跟着改變，用vw作爲根節點的字體大小的單位，所以在不同的屏幕大小或者設備中，根節點的字體大小的值就不一樣，rem單位得到的值就不一樣
實現步驟：
（1）使用vw單位作爲 HTML font-size的單位（計算）

  //  如果設計圖爲750px，那麼我們需要設置一下代碼
    	html{
    	  font-size: 13.33333333vw
    	}

（2）頁面所有佈局使用rem單位

div{
  //這樣我們寫1rem即爲設計稿上的100px
	width:1rem; // 在頁面中顯示的值爲 50px
	height:1rem;
}

問題：爲什麼根節點字體大小爲寫13.33333333vw，爲什麼100px = 1rem?
750px = 100vw
1px = 100 / 750 = 0.133333333333333vw
100px = 0.133333333333333vw *100px = 13.33333333vw
rem的 值是根據 跟根節點的字體大小來計算的，設置根節點的字體大小爲100px，是爲了方便計算

最終於得出 100px = 1rem

3、使用js + rem單位佈局

原理：通過js獲取設備的寬度，來計算根節點的字體大小，rem得出來的值就不一樣，就到達不同頁面能適配
我們可以在編輯器裏面安裝一個擴展插件來自動計算px---->rem
（1）在vscode的擴展裏面安裝插件：cssrem
（2）然後在vscode配置文件中更改：rootfontsize爲設計圖 / 10的數字
（3）在頁面中使用script標籤引入獲取設備的特性更改根節點地質體大小的 js文件
（4）在頁面中的所有佈局都用rem作爲單位，設計圖量處的值爲多少就寫多少，但是要選擇轉換成rem的那個值

4、使用sass + vw單位佈局

原理：使用vw作爲頁面所有元素的佈局單位，簡化之前rem + vw結合的佈局
（1）使用sass的函數：

@function vw($px) {
    @return ($px / 設計圖的寬度) * 100vw;
}

（2）頁面中佈局

header {
	 height: vw(量出來的值);
  	background: green;
 	 font-size: vw(48);
}