1 布局視口和視覺視口

1.1 設置移動端布局視口寬度

避免布局視口寬度默認980px帶了的縮放問題,并且禁止用戶縮放頁面

2 移動端適配方案

2.1 rem單位+動態(tài)html的font-size；

rem 是 CSS3 中的一個相對長度單位，它表示相對于根元素（html 元素）的字體大小來計算長度。rem 的值不會受到父元素字體大小的影響，而始終是相對于根元素字體大小計算的。
可以直接使用lib-flexible庫

html {font-size: 16px; /* 將根元素字體大小設置為16px */
}body {font-size: 1rem; /* 1rem 等于根元素字體大小，即16px */
}h1 {font-size: 2rem; /* 2rem 等于根元素字體大小的兩倍，即32px */
}p {font-size: 0.875rem; /* 0.875rem 等于根元素字體大小的0.875倍，即14px */
}

2.2 vw單位

vw 是 CSS3 中的一個相對長度單位，它表示相對于視口寬度（viewport width）的百分比來計算長度。1vw 等于視口寬度的 1%。與其他相對長度單位（如 em 和 %）不同，vw 的值是基于視口寬度計算的，而不是基于父元素的寬度。

2.3 rem和vw對比

一般來說，如果要設置元素的寬度、高度等屬性，應該優(yōu)先考慮使用 vw 單位；如果要設置元素的字體大小、行高等屬性，可以優(yōu)先考慮使用 rem 單位。建議都使用vw.

2.4 flex的彈性布局