在線轉化工具: http://www.ofmonkey.com/front/rem
rem
是相對於根元素<html>
,這樣就意味着,我們只需要在根元素確定一個參考值,這個參考值設置為多少,完全可以根據您自己的需求來定。
如果,瀏覽器默認的字號16px
,來看一些px
單位與rem
之間的轉換關系:
為了計算方便,時常將在<html>
元素中設置font-size
值為62.5%
相當於在<html>
中設置font-size
為10px
,此時,上面示例中所示的值將會改變:

相當於在
<html>
中設置font-size
為10px
,此時,上面示例中所示的值將會改變:
由於rem
是css3中的一個屬性,很多人首先關注的就是瀏覽器對他的支持度,截了一張caniuse對rem
屬性的兼容表:

原文鏈接:http://caibaojian.com/rem-and-px.html
1rem等於多少px呢?·
1rem等於html根元素設定的font-size的px值,假如我們在css里面設定下面的css。
//code from http://caibaojian.com/rem-and-px.html 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實現移動端自適應: http://caibaojian.com/flexible-js.html