一啰挪、viewport(視口) meta tag
先來講幾個概念：
image.png
image.png
窗口是包含了橫向和縱向滾動條的侵佃，而視口不包含勃黍，視口（viewport）相當(dāng)于html的父級元素块请，html設(shè)置寬度100%娜氏，也就是等于viewport的寬度。
通過
document.documentElement.clientWidth獲取視口的寬度,通過document.documentElement.clientWidth獲取視口的高度墩新，拉伸和收縮贸弥，縮放瀏覽器都是會改變視口的大小。一個div寬度設(shè)為100px海渊，放大瀏覽器一倍茂腥，那么字體也被放大一倍，難道他的像素變?yōu)?00px了嗎切省，并沒有，變的是這個100px的div在設(shè)備上所占的物理像素帕胆。
作用： 控制視口的大小和形狀
width：設(shè)置視口的寬度朝捆，可以設(shè)置數(shù)值，也可以設(shè)置一個特殊的值
width="device-width"表示100vw也就是100%的視口寬度（height同理）
initial-scale: 頁面首次加載縮放比例懒豹，默認(rèn)為1
maximum-scale: 控制放大的倍數(shù)
minimum-scale: 控制縮小的倍數(shù)
```user-scalable``: 是否允許用戶縮放
移動端設(shè)備的viewport一般都是比瀏覽器大芙盘，因?yàn)槭謾C(jī)的分辨率比電腦的分辨率小，帶來的后果就是 出現(xiàn)橫向滾動條
css的1px對應(yīng)電腦的屏幕往往都是1px脸秽，造成一個誤區(qū)就是css的1像素就是物理像素儒老，隨著手機(jī)的分辨率越來越高，css的1px等于物理像素2px
二记餐、計算html根字體的大小
設(shè)計稿是750px驮樊，收集設(shè)備的100vw是375的話，375px寬度的viewport要裝下750px的設(shè)計稿，用375/750得到的就是0.5囚衔，根元素的大小設(shè)置為0.5px 1rem也就是0.5px挖腰，但是fontsize最小值應(yīng)該是12px，放大10倍不夠 放大100倍
image.png
當(dāng)我們設(shè)置html的font-szie為 (屏幕寬度*100/設(shè)計稿寬度) 的px 時 當(dāng)我們在設(shè)計稿上測得的 px 單位值,直接將值除以100換為 rem單位寫到代碼里面即可
