作者:
WangMin
格言:努力做好自己喜歡的每一件事
國內的設計師大都喜歡用px，而國外的網站大都喜歡用em和rem，那么三者的區別與優勢是什么？接下來我們就來學習一下吧！
單位px、em、rem分別表示什么？
1、 px(Pixel) 相對於顯示器分辨率而言，表示“絕對尺寸”（並非真正的絕對），實際上就是css中定義的像素（這里的像素與設備的物理像素有一定的區別），利用px設置字體大小及元素寬高等比較穩定和精確。px的特點如下：
- IE無法調整那些使用px作為單位的字體大小；
- 國外的大部分網站能夠調整的原因在於其使用了em或rem作為字體單位；
- Firefox能夠調整px和em，rem，但是96%以上的中國網民使用IE瀏覽器(或內核)。
- px不能適應瀏覽器縮放時產生的變化，因此一般不用於是響應式網站。
2、em 表示相對尺寸，其相對於當前對象內 (父級元素) 文本的字體尺寸 font-size（如當前對行內文本的字體尺寸未被設置，則相對於瀏覽器的默認字體尺寸。 任意瀏覽器的默認字體高都是16px。所有未經調整的瀏覽器都符合：1em = 16px。）。使用em可以較好的相應設備屏幕尺寸的變化，但是在進行元素設置時都需要知道父元素文本的font-size及當前對象內文本的font-size，如有遺漏可能會導致錯誤。em的特點如下：
- em的值並不是固定的；
- em會繼承父級元素的字體大小。
3、rem 為css3新增的一個相對單位，使用rem為元素設定字體大小時，仍然是相對大小，但是rem只相對於HTML根元素的font-size，因此只需要確定這一個font-size。使用rem的好處是只修改根元素就可以成比例的調整所有字體的大小，又可以避免字體大小逐層復合的連鎖反應。
目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。以下是我在 caniuse對rem屬性的兼容表：
對於不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。如下：
元素{
font-size:14px;
font-size:2rem;
}
rem、em與px間的換算關系
1、 px與em之間的換算關系
任意瀏覽器的默認字體大小16px。所有未經調整的瀏覽器都符合: 1em=16px。那么12px=0.75em,10px=0.625em，這樣換算起來有點麻煩，而且容易換算出錯。所以，為了簡化font-size的換算，我們可以制定一個單位換算基准：需要在css中的body選擇器中聲明font-size=62.5%，代碼如下：
body{
font-size:62.5% ;
}
這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然后換上em作為單位就行了。基准對照表如下圖：
總結：我們在寫CSS的時候，需要注意以下兩點：
1）body選擇器中聲明font-size=62.5%；
2）將你的需要轉換的px數值除以10，然后換上em作為單位；
3）重新計算那些被放大的字體的em數值。避免字體大小的重復聲明。
我們來舉一個例子來說明一下：
<div>
<p> 你猜我字體是多大？em</p>
</div>
body{
font-size:62.5%;
}
div{
font-size:1.2em; //font-size=10 *1.2 =12px
}
p{
font-size:1.2em; //font-size= 12*1.2=14.4px
}
我們可以的到p的字體大小為14.4px，如下：
p的字體大小是怎么計算的呢？因為em相對於當前對象內 (父級元素) 文本的字體尺寸，p是div的子元素，div是body的子元素，要想的到p的字體大小就要先的到div的字體大小，因為body選擇器中聲明了font-size=62.5%，所以div的字體大小為1.2*10=12px，相當於div聲明了font-size=75%（1em=12px），因為p：1.2em，所以p的字體大小轉換為px:12*1.2=14.4px。這里就應證了em單位的缺點。
2、 px與rem之間的換算關系
從上面可以得到rem是一個相對大小的值，它相對於根元素，瀏覽器的默認字體尺寸也是16px。這時 px與rem之間的換算是1rem=16rem。下面是默認16px與rem之間的轉換關系：
| px | rem |
|---|---|
| 12 | 12/16 = .75 |
| 14 | 14/16 = .875 |
| 16 | 16/16 = 1 |
| 18 | 18/16 = 1.125 |
| 20 | 20/16 = 1.25 |
| 24 | 24/16 = 1.5 |
| 30 | 30/16 = 1.875 |
| 36 | 36/16 = 2.25 |
| 42 | 42/16 = 2.625 |
| 48 | 48/16 = 3 |
比如假設，我們設置html的字體大小的值為html｛font-size: 87.5%;｝（也就是1rem=14px）。然后其他的字體大小就是將你要的值除以14得到的值加上 rem 單位。上面的14是個變量，相對於你對根元素html字體大小的設定，如果你設定的是62.5%，那除數就變成10了。如果你根元素的字體大小選62.5%，那px和rem之間的換算就是px直接除以10就得到rem了。為了簡化font-size的換算，我們在html中也可以寫入以下代碼:
html{
font-size: 62.5%; /* 公式16px*62.5%=10px */
}
此時，上面示例中所示的值將會改變:
| px | rem |
|---|---|
| 12 | 12/10 = 1.2 |
| 14 | 14/10 = 1.4 |
| 16 | 16/10 = 1.6 |
| 18 | 18/10 = 1.8 |
| 20 | 20/10 = 2.0 |
| 24 | 24/10 = 2.4 |
| 30 | 30/10 = 3.0 |
| 36 | 36/10 = 3.6 |
| 42 | 42/10 = 4.2 |
| 48 | 48/10 = 4.8 |
我們來舉一個例子來說明一下：
<div>
<p> 你猜我字體是多大？rem</p>
</div>
html{
font-size: 62.5%; /* 公式16px*62.5%=10px */
}
div{
font-size:2rem;
}
p{
font-size:2rem;
}
我們可以得到p的字體大小轉換為px為：20px
p的字體大小是怎么計算的呢？因為rem只相對於HTML根元素的font-size，所以rem 以html{ font-size: 62.5%; }為轉換基准 公式16px*62.5%=10px相當於1rem=10px，然后就可以得到p的字體大小：10*2rem=20px。
注意：
- 若沒有在根元素（html字體）指定參照值，那瀏覽器默認1rem 就是16px，若指定值，則1rem就是指定值 。
- html設置為62.5%或者10px 時會失效，是因為小於12px或者75%的字體大小不支持換算。這可能與有些瀏覽器不支持12px 以下的大小有關。所以，使用rem單位，html的字體默認字體大小必須設置為12px或以上。若小於12px則瀏覽器換算時自動默認字體為12px。
總的來說，為了簡化font-size的換算，我們通常將rem與em的換算基准設置為 font-size : 62.5%; ，則此時1rem=1em = 16px * 62.5% = 10px， 這樣10px = 1em=1rem，方便於我們使用。
以上僅是個人見解，若有不足之處歡迎在下方評論指出，那就先分享到這里!! 😄 后續繼續更新!!