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;
}

vw 適配如何換算元素大小呢？使用公式：（元素大小 / 設計稿大小）* 100vw 將元素大小轉換為 vw 單位的大小。以常用的 750px 設計稿尺寸為例，假設設計稿的某個字型大小是 40px，換算成 vw 單位大小應該為 （40 / 750）* 100vw = 5.33333vw。可以選擇使用構建工具

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 單位為基礎，同時結合其他單位協同工作。