16px等于多少vw?
一、vw px rem em是什么1.vw:就是相對視口寬度(Viewport Width)。1vw = 1% * 視口寬度。也就是說,一個視口就是100vw。
2.px:px應(yīng)該是在css中使用最為普遍的單位了吧。px是屏幕設(shè)備物理上能顯示出的最小的一點。這個點不是固定寬度的,是相對長度單位。在桌面瀏覽器中,1個像素往往是對著電腦屏幕的1個物理像素,但是在移動端,隨著Retina屏的流行,分辨率提高了。css中的1px并不等于設(shè)備的1px。比如蘋果三手機,分辨率是320 x 480。蘋果四手機,變成了640 x 960,但是蘋果四手機的實際屏幕尺寸并沒有變化。這時候的1個css像素就是等于兩個物理像素。
3.rem:是相對單位,相對于html的字體尺寸。
4.em:所有現(xiàn)代瀏覽器下,默認(rèn)字體尺寸都是16px。這時,1em = 16px。em會繼承父級遲鈍,也是相對單位。
二、vw px rem之間的換算
1.我們假設(shè)pad的設(shè)計稿是以1920px為標(biāo)準(zhǔn)的。那么:100vw = 1920px1vw = 19.2px我們想要: 1rem = 100px(這樣方便我們在寫代碼的時候換算)那么:100px = 100vw / 19.2 = 1rem所以:1rem = 5.208vw。這時候,我們只要給html的根元素設(shè)置:font-size: 5.208vw即可。
2.同理的,手機端我們假設(shè)設(shè)計稿是以750px為標(biāo)準(zhǔn)的,那么:100vw = 750px1vw = 7.5px我們想要: 1rem = 100px那么:100px = 100vw / 7.5 = 1rem那么:1rem = 13.33vw