CSS 中的rem，em，vh，vw一次說清楚

標籤：logs   放心   image   demo   替換   com   概念   元素   1.5   

 　　關於css中的長度單位，我們用的最多就是px，因為他簡單直接。但是當一套方案匹配不同終端時，px就會顯得過於生硬，不容易變通。

　　然而rem，em，vh，vw就可以有效解決這一問題。讓我們來看看這些東西是個啥？

　　首先是rem，W3C官網描述是“font size of the root element”，即rem是相對於根項目。概念不好理解接咋們就直接直接看demo:

DOM結構如下：

             

 

CSS 代碼如下：

             

效果如下：

                

　　

　     現在對於rem是否有了點認識，設定html的font-size大小後，就有了參照值，其他地方的px就可以替換成rem了，就像demo所展示的html的font-size大小為16px，div中的字型大寫分別為1rem，1.5rem，2rem。換算成px就分別分 1* 16=16px，1.5*16=24px，2*16=32px。不僅僅是字型大小，html所有元素的寬高也可以寫成rem為單位，同樣是參照html的font-size的值。再擴充一下就是說所文檔中所有的可以使用px表示的都可以替換成rem。

　　那麼這麼做的意義又是什麼呢？當你需要做相應式布局時，rem就能發揮其正真的威力。通過匹配不同的設配的螢幕大小，設定其html的font-size的值，然後就可以放心大膽的使用rem，其他的就可以交給瀏覽器處理了。

       em，vh，vw原理大同小異。不同的是參考點不一樣，em參考的父節點的font-size的大小，即當父節點的fong-size為12px，子節點設定寬度為10em，font-size為2em，則寬度換算成px是12*10=120px，字型大小為12*2=24px，若孫節點的高度設定10em，那麼換算成px又是多少呢？ 當然是父節點的fong-size值24px乘10em，結果為240px，所以em永遠只關心上一級的font-size。那麼問題來了，上一級沒有設定font-size怎麼辦？不要慌，元素的font-size預設繼承父節點的font-size值。這下是不是就對em瞭然於胸了。

　　接下來是vh和vw。看著簡寫你可能看不出什麼東西。我們展開看看 vh:viewport height，vw:viewport width 。viewport叫做可視地區。這下是不是就感覺明白了vh和vw。沒錯就是你想的那樣，vh和vw分別參照可視地區的高度和寬度。

　　所以這些單位都是相對的，只要知道參考點，那麼就很簡單了。目前我所做的項目中，都是統一使用的rem 做的適配，方便有效，誰用誰知道！

　　作為一個新人，歡飲大家指導批評。

 

CSS 中的rem，em，vh，vw一次說清楚