rem與px之間的換算（移動端）

標籤：高度   開始   瞭解   元素   縮放   12px   font   手機   模糊   

    最近因為工作接觸到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之間的換算（移動端）