移動端的vw px rem之間換算

2021-09-13 13:13:15 字數 900 閱讀 8289

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會繼承父級遲鈍,也是相對單位。

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

好啦,本篇文章到此為止~

移動端px和rem的換算

看根元素html裡面設定的font size是多少 50 px,即認為1rem為多少 50 畫素 rem的優點是所有的元素大小都是乙個倍數,相對於根元素的倍數,所以只需要修改根元素,所有的元素都可以變化。可以適應不同的裝置解析度。缺點是ie6 ie7 ie8不支援這個標籤。指定了 1rem為50px...

Bit Byte KB MB GB之間的換算

換算 1 byte 8 bits 即 1b 8b 1 kb 1024 bytes 1 mb 1024 kb 1 gb 1024 mb 基本概念 bit意為 位 或 位元 是計算機運算的基礎,屬於二進位制的範疇 byte意為 位元組 是計算機檔案大小的基本計算單位 這兩者應用的場合不同。通常用bit來...

Bit Byte KB MB GB之間的換算

1 byte 8 bits 1 kb 1024 bytes 1 mb 1024 kb 1 gb 1024 mb bit意為 位 或 位元 是計算機運算的基礎,屬於二進位制的範疇 byte意為 位元組 是計算機檔案大小的基本計算單位 這兩者應用的場合不同。通常用bit來作資料傳輸的單位,因為物理層,資...