VW適配（不使用JS）
viewport 設置:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
不同設備完美視口的大小是不一樣的
iphone6 -- 375
iphone6plus -- 414
由於不同設備視口和像素比不同，所以同樣的375個像素在不同設備下的意義是不一樣的，比如在iphone6中375就是全屏，而到了plus中375就會缺一塊。
所以在移動端開發時，就不能再使用px來進行布局了
VW表示的是視口的寬度(viewport width)
100vw = 一個視口的寬度
1vw = 1%視口的寬度
vw這個單位永遠相當於視口寬度進行計算
設計圖的寬度
750px 或 1125px
使用vw作為單位
100vw
設計圖中 一個 48px*35px大小的元素
box1{
width:48px;
height:35px;
}
100vw = 750px(設計圖的像素)
0.13333333333333333333vw = 1px
box1{
width:6.4vw;
height:4.667vw;
}
VW適配
1 rem= 1 html的字體大小
網頁中字體大小最小是12px，不能設置比12像素還小的字體，如果設置了一個小於12px的字體，則字體自動設置為12
所以別想着 設置 font-size:0.13333 vw；然后1 rem = 1px（設計圖）
但是你可以 設置font-size:5.3333 vw; 然后1 rem = 40 px(設計圖)
html{
font-size:5.3333vw
}
box1{
width:1.2rem;
height:0.875rem;
}
或者更直接 設置font-size:13.333vw; 然后1 rem = 100px(設計圖)
html{
font-size:13.333vw
}
box1{
width:0.48rem;
height:0.35rem;
}
vw 適配如何換算元素大小呢？使用公式：（元素大小 / 設計稿大小）* 100vw 將元素大小轉換為 vw 單位的大小。以常用的 750px 設計稿尺寸為例，假設設計稿的某個字體大小是 40px，換算成 vw 單位大小應該為 （40 / 750）* 100vw = 5.33333vw。可以選擇使用構建工具postcss-px-to-viewport簡化工作流程。
rem適配
rem 適配是縮放處理設計思想的典型代表。rem 是一個相對單位，它永遠相對於根元素（html）的字體大小，這個特性方便了統一管理元素的大小，非常適合用來處理布局。
viewport設置（與vw相同）：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
如何合理設置 rem 的大小呢？通常將頁面寬度進行 10 等分，即：
const rem = document.documentElement.clientWidth / 10
這樣，rem 的大小完全是隨屏幕正比變化，就能根據設計稿尺寸換算頁面元素和字體的大小。以常用的 750px 設計稿尺寸為例，假設設計稿的某個字體大小是 40px，換算成 rem 應該為 40 / 75 = 0.53333rem。當然這樣計算很麻煩，可以選擇使用構建工具postcss-pxtorem簡化這些工作。
注意：並非所有單位都需要轉換成 rem，通常只對需要等比縮放的元素進行 rem 換算，對於不需要縮放的元素，比如邊框陰影，使用 px 等其他單位。實際開發中，應該以 rem 單位為基礎，同時結合其他單位協同工作。