我們很容易無法擺脫的使用我們所熟悉的CSS技術(shù)，當(dāng)新的問題出現(xiàn)，這樣會(huì)使我們處于不利的地位。
隨著Web繼續(xù)的發(fā)展，對新的解決方案的需求也會(huì)繼續(xù)增大。因此，作為網(wǎng)頁設(shè)計(jì)師和前端開發(fā)人員，我們別無選擇，只有去了解我們的工具集并且熟悉它。
這意味著我們還要了解一些特殊的工具-那些不經(jīng)常使用的，但是當(dāng)需要它們的時(shí)候，它們恰恰是最正確的工具。
今天，我將要向你介紹一些你以前可能不知道的CSS工具。這些工具都是計(jì)量單位，就像像素或者相對單位,但是很可能你從來沒聽說過它們！讓我們一探究竟吧。
rem
我們將從你已經(jīng)熟悉的東西開始。em單位被定義為當(dāng)前字體大小。例如，如果你在body元素上設(shè)置一個(gè)字體大小，那么在body元素內(nèi)的任何子元素的em值都等于這個(gè)字體大小。
<body>
<div class="test">Test</div>
</body>
body {
font-size: 14px;
}
div {
font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}
在這里，我們說這個(gè)div將有一個(gè)1.2em的font-size。它是所繼承的字體大小的1.2倍，在這個(gè)例子中為14px。結(jié)果為16.8px.
但是，當(dāng)你在每個(gè)元素內(nèi)都級(jí)聯(lián)em定義的字體大小將會(huì)發(fā)生什么？在下面的代碼片段中我們應(yīng)用和上面一模一樣的CSS.每個(gè)div從它們的父節(jié)點(diǎn)繼承字體大小，帶給我們逐漸增加的字體大小。
<body>
<div>
Test <!-- 14 * 1.2 = 16.8px -->
<div>
Test <!-- 16.8 * 1.2 = 20.16px -->
<div>
Test <!-- 20.16 * 1.2 = 24.192px -->
</div>
</div>
</div>
</body>
雖然在某些情況下可能需要這個(gè)，但是通常你可能想基于一個(gè)唯一的度量標(biāo)準(zhǔn)來按比例縮放。在這種情況下，你應(yīng)該用rem。rem中的”r“代表”root“；這等同于font-size基于根元素進(jìn)行設(shè)置；在大多數(shù)情況下根元素為html元素。
html {
font-size: 14px;
}
div {
font-size: 1.2rem;
}
在上一個(gè)示例中三個(gè)嵌套的div的字體大小計(jì)算結(jié)果都為16.8px。
對網(wǎng)格布局的好處
rem不是只對定義字體大小有用。比如，你可以使用rem
把整個(gè)網(wǎng)格系統(tǒng)或者UI樣式庫基于HTML根元素的字體大小上,然后在特定的地方使用em
比例縮放。這將帶給你更加可預(yù)測的字體大小和比例縮放。
.container {
width: 70rem; // 70 * 14px = 980px
}
從概念上講，像這樣一個(gè)策略背后的想法是為了允許你的界面隨著你的內(nèi)容按比例縮放。然而，這可能不一定對每個(gè)案例都有意義。
“rem(root em)單位”的兼容性列表。
vh和vw
響應(yīng)式網(wǎng)頁設(shè)計(jì)技術(shù)很大程度上依賴于比例規(guī)則。然而，CSS比例不總是每個(gè)問題的最佳解決方案。CSS寬度是相對于最近的包含父元素。如果你想使用顯示窗口的寬度或高度而不是父元素的寬度將會(huì)怎么樣？這正是vh和vw單位所提供的。
vh等于viewport高度的1/100.例如，如果瀏覽器的高是900px,1vh求得的值為9px。同理，如果顯示窗口寬度為750px,1vw求得的值為7.5px。
這些規(guī)則表面上看起來有無盡的用途。例如，做一個(gè)占滿高度的或者接近占滿高度的幻燈片，可以用一個(gè)非常簡單的方法實(shí)現(xiàn)，只要用一行CSS：
.slide {
height: 100vh;
}
設(shè)想你想要一個(gè)占滿屏幕寬度的標(biāo)題。為做到這一點(diǎn)，你將會(huì)用vw來設(shè)置一個(gè)字體大小。這個(gè)大小將會(huì)隨著瀏覽器的寬度按比例縮放。
視窗單位: vw, vh的兼容性列表。
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。
所以你什么時(shí)候可能用到這些值？
設(shè)想你需要一個(gè)總是在屏幕上可見的元素。使用高度和寬度設(shè)置為低于100的vmin值將可以實(shí)現(xiàn)這個(gè)效果。例如，一個(gè)正方形的元素總是至少接觸屏幕的兩條邊可能是這樣定義的：
.box {
height: 100vmin;
width: 100vmin;
}
如果你需要一個(gè)總是覆蓋可視窗口的正方形(一直接觸屏幕的四條邊),使用相同的規(guī)則只是把單位換成vmax
。
.box {
height: 100vmax;
width: 100vmax;
}
這些規(guī)則的組合提供了一個(gè)非常靈活的方式，用新的、令人興奮的方式利用你的可視窗口的大小。
Viewport units: vmin, vmax兼容列表。
ex 和 ch
ex和ch單位，與em和rem相似，依賴于當(dāng)前字體和字體大小。然而，與em和rem不同的是，這兩個(gè)單位只也依賴于font-family，因?yàn)樗鼈儽欢榛谔厥庾煮w的法案。
ch單位，或者字符單位被定義為0字符的寬度的“先進(jìn)的尺寸”。在“Eric Meyer’s的博客”中可以找到一些非常有趣的討論關(guān)于這意味著什么，但是基本的概念是，給定一個(gè)等寬字體的字體，一個(gè)N個(gè)字符單位寬的盒子，比如width：40ch;,可以一直容納一個(gè)有40個(gè)字符的應(yīng)用那個(gè)特定字體的字符串。雖然這個(gè)特殊規(guī)則的傳統(tǒng)用途與列出盲文有關(guān)，但是這里創(chuàng)造性的可行性一定會(huì)超越這些簡單的用途。
ex單位被定義為”當(dāng)前字體的x-height或者一個(gè)em的一半”。給定的字體的x-height是指那個(gè)字體的小寫x的高度。通常，這是這個(gè)字體的中間的標(biāo)志。
x-height:小寫字母x的高度(閱讀更多關(guān)于The Anatomy of Web Typography)
對于這種單位有很多的用途，大多數(shù)是用于排版的微調(diào)。例如，sup元素,代表上標(biāo)，可以用相對定位和一個(gè)1ex的底部值在行內(nèi)被推高。類似地，你可以拉低一個(gè)下標(biāo)元素。瀏覽器默認(rèn)支持這些利用上標(biāo)和下標(biāo)特性的vertical-align規(guī)則，但是如果你想要更精細(xì)的控制，你可以像這樣更明確的處理樣式：
sup {
position: relative;
bottom: 1ex;
}
sub {
position: relative;
bottom: -1ex;
}
ex單位在CSS1中已經(jīng)存在，但是你不會(huì)找到對ch單位有像這樣堅(jiān)實(shí)的支持。
具體支持，在Eric Meyer’s 的博客中查看CSS單位和值。
結(jié)論
密切關(guān)注CSS的持續(xù)發(fā)展和擴(kuò)張是非常重要的，一邊在你的工具集里知道所有的工具。也許你會(huì)遇到一個(gè)特殊的問題需要一個(gè)意想不到的解決方案，利用這些更隱蔽的計(jì)量單位之一。花時(shí)間去閱讀新規(guī)范，記錄來自好的資源的新聞資訊！
原文出處： @Jonathan Cutrell 譯文出處：w3cplus - 白粥
