rem與px的轉換

2021-09-24 12:32:50 字數 1763 閱讀 3056

2019獨角獸企業重金招聘python工程師標準》

rem是相對於根元素,這樣就意味著,我們只需要在根元素確定乙個參考值,這個參考值設定為多少,完全可以根據您自己的需求來定。

我們知道,瀏覽器預設的字型大小16px,來看一些px單位與rem之間的轉換關係:

|  px  |     rem       |

------------------------

| 12 | 12/16 = .75 |

| 14 | 14/16 = .875 |

| 16 | 16/16 = 1 |

| 18 | 18/16 = 1.125 |

| 20 | 20/16 = 1.25 |

| 24 | 24/16 = 1.5 |

| 30 | 30/16 = 1.875 |

| 36 | 36/16 = 2.25 |

| 42 | 42/16 = 2.625 |

| 48 | 48/16 = 3 |

-------------------------

為了方便計算,時常將在元素中設定font-size值為62.5%:

相當於在中設定font-size10px,此時,上面示例中所示的值將會改變:

|  px  |     rem        |

-------------------------

| 12 | 12/10 = 1.2 |

| 14 | 14/10 = 1.4 |

| 16 | 16/10 = 1.6 |

| 18 | 18/10 = 1.8 |

| 20 | 20/10 = 2.0 |

| 24 | 24/10 = 2.4 |

| 30 | 30/10 = 3.0 |

| 36 | 36/10 = 3.6 |

| 42 | 42/10 = 4.2 |

| 48 | 48/10 = 4.8 |

-------------------------

由於rem是css3中的乙個屬性,很多人首先關注的就是瀏覽器對他的支援度,我截了一張caniuse對rem屬性的相容表:

從上圖可以清楚的知道,rem在眾多瀏覽器中都已得到很好的支援,如果您的專案不用考慮ie低版本的話,你就可以放心的使用了。

1rem等於多少px呢?

1rem等於html根元素設定的font-size的px值,假如我們在css裡面設定下面的css。

html
那麼後面的css裡面的rem值則是以這個14來換算,例如設定乙個div寬度為3rem,高度為2.5rem.則它換算成px為width:42px.height:35px,同理,假如乙個設計稿為寬度42px,高度為35px,則換成成rem,則是42/14=3rem,35/14=2.5rem。

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

rem與px的轉換

1.em是相對於元素的的父元素的font size進行計算。缺點 當父元素多層使用font size時,可能會帶來無法預知的錯誤。2.rem是相對於根元素html的font size進行計算。rem和em的區別說完後,就介紹rem和px之間的轉換吧。帶著愉快的心情去了解吧,歐耶 px和rem之間的轉...

Rem與Px的轉換

rem是css3中新增加的乙個單位值,他和em單位一樣,都是乙個相對單位。不同的是em是相對於元素的父元素的font size進行計算 rem是相對於根元素html的font size進行計算。這樣一來rem就繞開了複雜的層級關係,實現了類似於em單位的功能。rem的使用 前面說了em是相對於其父元...

rem與px之間的轉換

rem是相對於根元素,這樣就意味著,我們只需要在根元素確定乙個參考值,這個參考值設定為多少,完全可以根據您自己的需求來定。所以這裡總結一句,所謂依賴根元素來計算的方式,就是先給予html元素乙個font size,然後我們所有的rem就根據這個font size來計算 例如 html那麼我們這裡的1...