說起css中的em侈百，大家都會想到rem瓮下、vh、vw等（ex钝域、ch是基于字體的單位讽坏，本文暫且不提）。個人感覺除了em容易讓人誤解外例证，另外三個比較容易路呜，我們把em放到最后。
另外织咧，px為像素單位胀葱，是絕對單位，可以直接設(shè)置或比較笙蒙，不受父元素影響巡社。
1.vh和vw
響應式web設(shè)計離不開百分比，但CSS百分比并不是所有的問題的最佳解決方案手趣。CSS的寬度是相對于包含它的最近的父元素的寬度的晌该。但是如果你就想用視口（viewpoint）的寬度或者高度，而不是父元素的绿渣，怎么辦朝群？ 這就是 vh 和 vw 單位為我們提供的。
1vh 等于1/100的視口高度中符。
如：瀏覽器高度900px, 1 vh = 800px/100 = 8 px姜胖。同理，如果視口寬度未750淀散， 1vw = 700px/100 = 7px右莱。
這樣一來可以解決好多問題：
如：用一行代碼就可以實現(xiàn)設(shè)置高度與視口等高蚜锨。
.div1 {
height : 100vh;
}
如：設(shè)置字體單位為vw，字體大小就會自動根據(jù)瀏覽器的寬度進行縮放慢蜓，以達到字體和視口大小同步的效果亚再。
2.rem
rem是相對與根元素字體大小來定義的，這并不難理解晨抡。當根元素<html>標簽設(shè)置了固定的字體大小氛悬，如：16px，我們使用rem沒有任何影響耘柱；有時候如捅，根元素沒有設(shè)置字體，它就會從瀏覽器繼承默認設(shè)置的字體大小调煎，一般默認為16px镜遣，但是我們同樣可以去更改這個值，或者有些瀏覽器默認值不是16px士袄，就會影響我們的設(shè)計效果悲关。
所以，使用rem窖剑，最好設(shè)置好根元素的字體大小坚洽。
3.em
重點理解:
有一個比較普遍的誤解，認為 em 單位是相對于父元素的字體大小西土。 事實上讶舰，根據(jù)W3標準 ，它們是相對于使用em單位的元素的字體大小需了。
父元素的字體大小可以影響 em 值跳昼，但這種情況的發(fā)生，純粹是因為繼承肋乍。
讓我們通過實例來看一下：
<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>
上邊這個例子鹅颊，說div2的em是相對相對于父元素div1字體大小來說看似沒什么問題，其實這里div2的字體是通過繼承div1得來的墓造。
我們再來看：
<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)變大了觅闽。 它不受父元素的字體大小帝雇。
