rem與px之間的換算(移動端)


    最近因為工作接觸到rem與px之間的換算,之前知道一些,不過還是比較籠統模糊,用起來不是很明白,后來自己查了點資料,以及親自測試總算明白它們之間是怎么換算的了。

    rem是一個相對值,它相對於根元素html,所以我們在使用的時候需要設置html的font-size值,內容大小就相對該值進行設置大小,比如,html的font-size為100px,內容的font-size想設置為20px,這換算為rem單位就是20/100=0.2rem。不過在開發中,html的font-size值會動態變化的,這樣才可以自適應各種手機端,但我們可以把100px設置為最大值。html的font-size不只限於px單位,有的還使用了%,我在開發中就遇到這個,一開始我還不是了解,后來我查了一下才知道百分之幾會有對應的像素值,比如62.5%對應的像素值是10px,75%對應的像素值是12px,這個是怎么算出來的呢?我們都知道,瀏覽器的默認字體大小是16px,那么16px對應的百分比就是100%,其他像素的百分比就是除以16得到的。

   在沒有設置html的font-size值時,rem就相對瀏覽器的font-size值,即16px。

   使用rem有什么好處呢?rem既然是一個相對值,那么我們就可以改變html的font-size值來動態改變頁面內容的字體大小,寬高度,間距等等,這樣就有了一個自由縮放的效果,在移動端就可以適配不同手機屏幕,所以在移動端就使用rem作為單位。

 

    另外:

    涉及到rem與px的換算,就想到與rem相似的em,em也是一個相對單位,不過它是相對於使用em單位的元素的字體大小,有一個普遍的誤解,以為em是相對於父元素的字體大小,其實,這是因為繼承的原因,父元素的字體大小才可以影響em的值。


免責聲明!

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



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