rem與px的關係

2021-10-01 06:47:26 字數 760 閱讀 9993

rem是相對於根元素 < html > 的,我們只需要在根元素上設定乙個參考的值,這個參考值根據自己的需求來定。

如:瀏覽器的預設的font-size=「16px」,它的px和rem之間的轉換如下表所示:

pxrem

12px

12/16=0.75 rem

14px

14/16=0.875 rem

16px

16/16=1 rem

18px

18/16 = 1.125 rem

20px

20/16 = 1.25 rem

24px

24/16 = 1.5 rem

30px

30/16 = 1.875 rem

36px

36/16 = 2.25 rem

42px

42/16 = 2.625 rem

48px

48/16 = 3 rem

1rem等於html根元素設定的font-size的值

假設我們在css中設定的css為:

html

我們設定乙個div的寬度為5rem,高度為2rem,換算成px結果為:寬度為70px,高度為28px;

同理,如果設計稿上的寬度為70px,高度為28px,換成rem,結果為:寬度為5rem,高度為2rem

注意:如果css裡面沒有設定html的font-size,則預設的瀏覽器以1rem=16px來換算

px與rem關係及轉換

px特點 1.ie無法調整那些使用px作為單位的字型大小 2.國外的大部分 能夠調整的原因在於其使用了em或rem作為字型單位 3.firefox能夠調整px和em,rem,但是96 以上的中國網民使用ie瀏覽器 或核心 px畫素 pixel 相對長度單位。畫素px是相對於顯示器螢幕解析度而言的。引...

px與rem的轉換關係

rem是相對於根元素,這樣就意味著,我們只需要在根元素確定乙個參考值 例如20px 這個參考值設定為多少,完全可以根據您自己的需求來定。在瀏覽器預設的字型大小16px的情況下,來看一些px單位與rem之間的轉換關係 px rem 12 12 16 75 14 14 16 875 16 16 16 1...

rem與px的轉換

2019獨角獸企業重金招聘python工程師標準 rem是相對於根元素,這樣就意味著,我們只需要在根元素確定乙個參考值,這個參考值設定為多少,完全可以根據您自己的需求來定。我們知道,瀏覽器預設的字型大小16px,來看一些px單位與rem之間的轉換關係 px rem 12 12 16 75 14 14...