一、viewport(視口) meta tag
先來講幾個概念：
image.png
image.png
窗口是包含了橫向和縱向滾動條的，而視口不包含，視口（viewport）相當于html的父級元素，html設置寬度100%，也就是等于viewport的寬度。
通過
document.documentElement.clientWidth獲取視口的寬度,通過document.documentElement.clientWidth獲取視口的高度，拉伸和收縮，縮放瀏覽器都是會改變視口的大小。一個div寬度設為100px，放大瀏覽器一倍，那么字體也被放大一倍，難道他的像素變為200px了嗎，并沒有，變的是這個100px的div在設備上所占的物理像素。
作用： 控制視口的大小和形狀
width：設置視口的寬度，可以設置數值，也可以設置一個特殊的值
width="device-width"表示100vw也就是100%的視口寬度（height同理）
initial-scale: 頁面首次加載縮放比例，默認為1
maximum-scale: 控制放大的倍數
minimum-scale: 控制縮小的倍數
```user-scalable``: 是否允許用戶縮放
移動端設備的viewport一般都是比瀏覽器大，因為手機的分辨率比電腦的分辨率小，帶來的后果就是 出現橫向滾動條
css的1px對應電腦的屏幕往往都是1px，造成一個誤區就是css的1像素就是物理像素，隨著手機的分辨率越來越高，css的1px等于物理像素2px
二、計算html根字體的大小
設計稿是750px，收集設備的100vw是375的話，375px寬度的viewport要裝下750px的設計稿，用375/750得到的就是0.5，根元素的大小設置為0.5px 1rem也就是0.5px，但是fontsize最小值應該是12px，放大10倍不夠 放大100倍
image.png
當我們設置html的font-szie為 (屏幕寬度*100/設計稿寬度) 的px 時 當我們在設計稿上測得的 px 單位值,直接將值除以100換為 rem單位寫到代碼里面即可
