轉(zhuǎn)自：https://www.cnblogs.com/leaf930814/p/9059340.html

　1、em

em作為font-size的單位時，其代表父元素的字體大小，em作為其他屬性單位時，代表自身字體大小——MDN

　　比如父元素font-size:12px;

　　自身元素如果寫成：font-sise:2em;則自身元素用px表示就是24px（相對父元素字體大?。?

　　但是自身元素設(shè)置：width:2rem,那么自身元素用px表示就是48px（相對自身字體大小）；

2、rem

rem作用于非根元素時，相對于根元素字體大小；rem作用于根元素字體大小時，相對于其出初始字體大小——MDN

　　比如根元素（html）設(shè)置font-size=12px; 非根元素設(shè)置width:2rem;則換成px表示就是24px；

　　如果根元素設(shè)置成font-size=1rem;則根元素?fù)Q成px就是相對于初始字體大小，一般是12px；

3、vm/vh

vw ： 視口寬度的 1/100；vh ：視口高度的 1/100 —— MDN

　　在pc端，視口寬高就是瀏覽器得寬高；

　　在移動端，這個還不太一樣，不過一般設(shè)置：

1<meta name="viewport"?content="width=device-width, initial-scale=1, maximum-scale=1">

關(guān)于rem：

rem是一種彈性布局，它強(qiáng)調(diào)等比縮放，100%還原。它和響應(yīng)式布局不一樣，響應(yīng)式布局強(qiáng)調(diào)不同屏幕要有不同的顯示，比如媒體查詢。

關(guān)于em：

上面知道，一旦某個節(jié)點(diǎn)的字體大小發(fā)生變化，其他節(jié)點(diǎn)也隨之變化，所以不合適，但是用來處理字體還是絕妙的。