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

我們知道，瀏覽器默認的字號16px，來看一些px單位與rem之間的轉換關系：

pxrem

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-size為10px，此時，上面示例中所示的值將會改變：

pxrem

12	12/10 = 1.2
14	14/16 = .875
16	4/10 = 1.4
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屬性的兼容表：

1rem等于多少px呢？

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

html{font-size:14px}
那么后面的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的转换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。