移動端的vw px rem之間換算

1、vw px rem em是什麼

1.vw:就是相對視口寬度(Viewport Width)。1vw = 1% * 視口寬度。也就是說，一個視口就是100vw。

2.px:px應該是在css中使用最爲廣泛的單位了吧。px是屏幕設備物理上能顯示出的最小的一點。這個點不是固定寬度的，是相對長度單位。在桌面瀏覽器中，1個像素每每是對着電腦屏幕的1個物理像素，可是在移動端，隨着Retina屏的流行，分辨率提升了。css中的1px並不等於設備的1px。好比蘋果三手機，分辨率是320 x 480。蘋果四手機，變成了640 x 960，可是蘋果四手機的實際屏幕尺寸並無變化。這時候的1個css像素就是等於兩個物理像素。

3.rem:是相對單位，相對於html的字體尺寸。

4.em:全部現代瀏覽器下，默認字體尺寸都是16px。這時,1em = 16px。em會繼承父級遲鈍，也是相對單位。

2、vw px rem之間的換算

1.咱們假設pad的設計稿是以1920px爲標準的。那麼：
100vw = 1920px
1vw = 19.2px
咱們想要： 1rem = 100px（這樣方便咱們在寫代碼的時候換算）
那麼:
100px = 100vw / 19.2 = 1rem
因此：
1rem = 5.208vw。
這時候，咱們只要給html的根元素設置：
font-size: 5.208vw便可。

2.同理的，手機端咱們假設設計稿是以750px爲標準的，那麼:
100vw = 750px
1vw = 7.5px
咱們想要： 1rem = 100px
那麼：
100px = 100vw / 7.5 = 1rem
那麼：
1rem = 13.33vw

好啦，本篇文章到此爲止~