1、em單位被定義為當前字體大小。例如，如果你在body元素上設置一個字體大小，那麽在body元素內的任何子元素的em值都等於這個字體大小。

在body內嵌套三層div，給最外層的div通過class屬性設置字體大小為16px；再給所有的div元素設置字體大小為2em。

效果圖：

2、rem中的"r"代表"root"；這等同於font-size基於根元素進行設置；在大多數情況下根元素為html元素。rem實現的是基於唯一標準進行比例縮放。

效果圖：

也可以按照唯一標準對寬度、高度進行比例設置：width:70rem；

3、vh和vw

響應式網頁設計技術很大程度上依賴於比例規則。然而，CSS比例不總是每個問題的最佳解決方案。CSS寬度是相對於最近的包含父元素。如果你想使用顯示窗口的寬度或高度而不是父元素的寬度將會怎麽樣？這正是vh

用vw來設置一個字體大小。這個大小將會隨著瀏覽器的寬度按比例縮放。

vh等於viewport高度的1/100.例如，如果瀏覽器的高是900px,1vh求得的值為9px。同理，如果顯示窗口寬度為750px,1vw求得的值為7.5px。

div{
  font-size:25vw;
}
4、vmin 和 vmax

vh和vm總是與視口的高度和寬度有關，與之不同的，vmin和vmax是與這次寬度和高度的最大值或最小值有關，取決於哪個更大和更小。例如，如果瀏覽器設置為1100px寬、700px高，1vmin會是7px,1vmax為11px。然而，如果寬度設置為800px，高度設置為1080px，1vmin將會等於8px

著作權歸作者所有。
商業轉載請聯系作者獲得授權,非商業轉載請註明出處。
原文: https://www.w3cplus.com/css/7-css-units-you-might-not-know-about.html ? w3cplus.com

CSS單位學習