說起css中的em，大家都會(huì)想到rem、vh、vw等（ex、ch是基于字體的單位，本文暫且不提）。個(gè)人感覺除了em容易讓人誤解外，另外三個(gè)比較容易，我們把em放到最后。
另外，px為像素單位，是絕對(duì)單位，可以直接設(shè)置或比較，不受父元素影響。
1.vh和vw
響應(yīng)式web設(shè)計(jì)離不開百分比，但CSS百分比并不是所有的問題的最佳解決方案。CSS的寬度是相對(duì)于包含它的最近的父元素的寬度的。但是如果你就想用視口（viewpoint）的寬度或者高度，而不是父元素的，怎么辦？ 這就是 vh 和 vw 單位為我們提供的。
1vh 等于1/100的視口高度。
如：瀏覽器高度900px, 1 vh = 800px/100 = 8 px。同理，如果視口寬度未750， 1vw = 700px/100 = 7px。
這樣一來可以解決好多問題：
如：用一行代碼就可以實(shí)現(xiàn)設(shè)置高度與視口等高。
.div1 {
height : 100vh;
}
如：設(shè)置字體單位為vw，字體大小就會(huì)自動(dòng)根據(jù)瀏覽器的寬度進(jìn)行縮放，以達(dá)到字體和視口大小同步的效果。
2.rem
rem是相對(duì)與根元素字體大小來定義的，這并不難理解。當(dāng)根元素<html>標(biāo)簽設(shè)置了固定的字體大小，如：16px，我們使用rem沒有任何影響；有時(shí)候，根元素沒有設(shè)置字體，它就會(huì)從瀏覽器繼承默認(rèn)設(shè)置的字體大小，一般默認(rèn)為16px，但是我們同樣可以去更改這個(gè)值，或者有些瀏覽器默認(rèn)值不是16px，就會(huì)影響我們的設(shè)計(jì)效果。
所以，使用rem，最好設(shè)置好根元素的字體大小。
3.em
重點(diǎn)理解:
有一個(gè)比較普遍的誤解，認(rèn)為 em 單位是相對(duì)于父元素的字體大小。 事實(shí)上，根據(jù)W3標(biāo)準(zhǔn) ，它們是相對(duì)于使用em單位的元素的字體大小。
父元素的字體大小可以影響 em 值，但這種情況的發(fā)生，純粹是因?yàn)槔^承。
讓我們通過實(shí)例來看一下：
<html style='font-size:10px'> //設(shè)置<html>字體10px
<div class='div1' style='font-size:2em'> //div1字體為20px
<div class='div2' style='padding:1.5em'> //div2 padding為30px
</div>
</div>
</html>
上邊這個(gè)例子，說div2的em是相對(duì)相對(duì)于父元素div1字體大小來說看似沒什么問題，其實(shí)這里div2的字體是通過繼承div1得來的。
我們?cè)賮砜矗?/p>
<html style='font-size:10px'> //設(shè)置<html>字體10px
<div class='div1' style='font-size:2em'> //div1字體為20px
<div class='div2' style='padding:1.5em;font-size:30px'> //div2 padding為45px
</div>
</div>
</html>
現(xiàn)在，我們的padding為45px，即 1.5 x 30 = 45 已經(jīng)變大了。 它不受父元素的字體大小。
