rem、em、px的區別，詳細介紹rem與px的轉換
阿新 • • 發佈：2018-12-23
PX：px畫素（Pixel）。相對長度單位。畫素px是相對於顯示器螢幕解析度而言的。
EM：em是相對長度單位，相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被設定，則相對於瀏覽器的預設字型尺寸。
注意：em的值是不固定的，em會繼承父元素的字型大小
REM：rem是相對長度單位，相對於根元素（即html元素）的font-size計算值的倍數。嗯、先看看rem的相容性，如下圖。
rem是相對於根元素<html>的font-size,這樣就意味著，我們只需要在根元素確定一個參考值，這個參考值設為多少，由我們來定
我們知道，瀏覽器預設的字號是16px，如果css裡面沒有設定html的font-size，則預設瀏覽器以1rem=16px來換算。
注意：任意瀏覽器的預設字型都是16px。所有未經調整的瀏覽器都符合1rem=16px
所以假定我們讓一個div的寬度為2em,那麼把它換算成px，width：32px，同理，假如一個設計稿為寬度48px，高度為60px，則換算成rem就是width=48/16=3rem,height=60/16=3.75rem
當然如果我們在css中設定了html根元素的font-size的值，如下所示（為了方便計算，時常將在<html>元素中設定font-size:值為62.5%,也就是16*62.5%=10px）
html{font-size:10px}那麼後面的css裡面的rem值就以1rem =10px來換算
所以假定我們讓一個div的寬度為2em,那麼把它換算成px，width：20px，同理，假如一個設計稿為寬度48px，高度為60px，則換算成rem就是width=48/10=4.8rem,height=60/10=6rem