px與rem的換算



在線轉化工具: http://www.ofmonkey.com/front/rem

 

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

如果,瀏覽器默認的字號16px,來看一些px單位與rem之間的轉換關系:

為了計算方便,時常將在<html>元素中設置font-size值為62.5%
相當於在<html>中設置font-size10px,此時,上面示例中所示的值將會改變:

由於remcss3中的一個屬性,很多人首先關注的就是瀏覽器對他的支持度,截了一張caniuserem屬性的兼容表:

 

 原文鏈接: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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM