書寫移動端網(wǎng)頁先調(diào)一個合適的像素比
? ? ? ?? 可以通過meta標簽來設(shè)置視口大小
? ? ? ?? 每一款移動設(shè)備設(shè)計時听系，都會有一個最佳像素比
??? ??? 一般我們只需要將像素比設(shè)置為該值就可以得到一個最佳效果
? ? ? ? 將像素比設(shè)置為最佳像素比的視口大小我們稱其為完美視口
? ? ? ? ? ? width=device-width
? ? ? ? ? ? width=device-width, initial-scale=1.0 一個意思刻剥，為了保險起見都寫
? ? ? ? ? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
像素：
? ? ? ? ? ? 在前端開發(fā)中像素分為兩種：css像素 和 物理像素
? ? ? ? ? ?? 瀏覽器在現(xiàn)實網(wǎng)頁時，需要將css像素轉(zhuǎn)換為物理像素然后再呈現(xiàn)
? ? ? ? ? ?? 一個css像素由幾個物理像素顯示姆打，由瀏覽器決定
? ? ? ? ? ? 默認情況下在pc端，一個像素 = 一個物理像素
視口（viewport）
? ? ? ? ? ? 視口就是屏幕中用來顯示網(wǎng)頁的區(qū)域
? ? ? ? ? ? 可以通過查看視口大小 ，來觀察css像素和物理像素的比值
? ? ? ????? 通過改變視口大小來改變像素比值
vw
? ? ? ????? 移動端開發(fā)中，就不能用px了
? ? ? ????? vw 表示視口的寬度（viewport widyh）
? ? ? ? ? ? - 100vw = 一個視口的寬度
? ? ? ? ? ? - 1vw = 1%視口寬度
? ? ? ? ? ? 這個單位永遠相對于視口寬度計算棒假，所以往往是將 px 和 vw 進行換算
適配
?????????? 設(shè)計稿寬度是750px溯职。盒子寬120px，高40px帽哑。
?????????? 則高為120px/750px*100vw = 16vw
?????????? 則寬為40px/750px*100vw = 0.5333333vw
?????? 開發(fā)中一般采用：
????????? 100px/750vw=? 0.13333333333333333 vw/px（1px 為0.13333333333333333 vw）
????????? 0.13333333333333333 vw/px*40px = 5.333 vw（由于字體大小最小只能設(shè)置12px,所以擴大40倍谜酒，即 40px 5.333vw）
????????? 設(shè)置 根元素html字體大小為?? font-size: 5.33333vw; 此時利用rem單位（相對于根元素大小）
????????? 此時40px為5.333vw
????????? 此時計算寬高：
?????? ? ? ? ?? 寬??? (120px/40px) = 3rem
??????????????? 高 ?? (40px/40px) = 1rem
手機像素
? ? ? ? ? ? 在不同屏幕下妻枕，單位像素的大小不同僻族，像素越小屏幕越清晰，手機像素點遠小于計算機像素
? ? ? ? ? ? 默認情況下屡谐，移動端的網(wǎng)頁都會將視口設(shè)置為980像素（css像素）
??????????? 以確保pc端網(wǎng)頁可以在移動端正常訪問,但是如果網(wǎng)頁的寬度超過980像素述么，移動端會自動縮放以顯示全
? ? ? ? ?? 所以大部分pc端網(wǎng)頁都會在移動端中正常瀏覽，但往往體驗感都不好
? ? ? ? ?? 為了解決這個問題愕掏，往往給移動端重新設(shè)計個網(wǎng)頁
像素參考網(wǎng)站
? ? ? ? ? ? https://material.io/resources/devices/
