1、em單位被定義為當(dāng)前字體大小。例如，如果你在body元素上設(shè)置一個(gè)字體大小，那么在body元素內(nèi)的任何子元素的em值都等于這個(gè)字體大小。

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

效果圖：

2、rem中的"r"代表"root"；這等同于font-size基于根元素進(jìn)行設(shè)置；在大多數(shù)情況下根元素為html元素。rem實(shí)現(xiàn)的是基于唯一標(biāo)準(zhǔn)進(jìn)行比例縮放。

效果圖：

也可以按照唯一標(biāo)準(zhǔn)對(duì)寬度、高度進(jìn)行比例設(shè)置：width:70rem；

3、vh和vw

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)技術(shù)很大程度上依賴于比例規(guī)則。然而，CSS比例不總是每個(gè)問題的最佳解決方案。CSS寬度是相對(duì)于最近的包含父元素。如果你想使用顯示窗口的寬度或高度而不是父元素的寬度將會(huì)怎么樣？這正是vh和vw單位所提供的。

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

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

div{

font-size:25vw;

}

4、vmin 和 vmax

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

選擇使用什么字體單位主要由項(xiàng)目來決定，如果你的用戶群都使用最新版的瀏覽器，那推薦使用rem，如果要考慮兼容性，那就使用px,或者兩者同時(shí)使用。無論是臺(tái)式還是移動(dòng)端開發(fā)，兩者其實(shí)都可以使用，只不過em需要注意繼承關(guān)系，并且需要修改多個(gè)內(nèi)容，而rem恰恰相反，所以rem更適合移動(dòng)式開發(fā)。

著作權(quán)歸作者所有。

商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

原文:https://www.w3cplus.com/css/7-css-units-you-might-not-know-about.html?w3cplus.com