我們很容易無法擺脫的使用我們所熟悉的CSS技術，當新的問題出現(xiàn)蚂会，這樣會使我們處于不利的地位转捕。
隨著Web繼續(xù)的發(fā)展作岖，對新的解決方案的需求也會繼續(xù)增大。因此五芝，作為網(wǎng)頁設計師和前端開發(fā)人員痘儡，我們別無選擇，只有去了解我們的工具集并且熟悉它枢步。
這意味著我們還要了解一些特殊的工具-那些不經(jīng)常使用的沉删，但是當需要它們的時候，它們恰恰是最正確的工具醉途。
今天矾瑰，我將要向你介紹一些你以前可能不知道的CSS工具。這些工具都是計量單位结蟋，就像像素或者相對單位,但是很可能你從來沒聽說過它們脯倚！讓我們一探究竟吧。
rem
我們將從你已經(jīng)熟悉的東西開始。em單位被定義為當前字體大小推正。例如恍涂，如果你在body元素上設置一個字體大小，那么在body元素內的任何子元素的em值都等于這個字體大小植榕。
<body>
<div class="test">Test</div>
</body>
body {
font-size: 14px;
}
div {
font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}
在這里再沧，我們說這個div將有一個1.2em的font-size。它是所繼承的字體大小的1.2倍尊残，在這個例子中為14px炒瘸。結果為16.8px.
但是，當你在每個元素內都級聯(lián)em定義的字體大小將會發(fā)生什么寝衫？在下面的代碼片段中我們應用和上面一模一樣的CSS.每個div從它們的父節(jié)點繼承字體大小顷扩，帶給我們逐漸增加的字體大小。
<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>
雖然在某些情況下可能需要這個慰毅，但是通常你可能想基于一個唯一的度量標準來按比例縮放隘截。在這種情況下，你應該用rem汹胃。rem中的”r“代表”root“婶芭；這等同于font-size基于根元素進行設置；在大多數(shù)情況下根元素為html元素着饥。
html {
font-size: 14px;
}
div {
font-size: 1.2rem;
}
在上一個示例中三個嵌套的div的字體大小計算結果都為16.8px犀农。
對網(wǎng)格布局的好處
rem不是只對定義字體大小有用。比如宰掉，你可以使用rem
把整個網(wǎng)格系統(tǒng)或者UI樣式庫基于HTML根元素的字體大小上,然后在特定的地方使用em
比例縮放呵哨。這將帶給你更加可預測的字體大小和比例縮放。
.container {
width: 70rem; // 70 * 14px = 980px
}
從概念上講贵扰，像這樣一個策略背后的想法是為了允許你的界面隨著你的內容按比例縮放仇穗。然而，這可能不一定對每個案例都有意義戚绕。
“rem(root em)單位”的兼容性列表。
vh和vw
響應式網(wǎng)頁設計技術很大程度上依賴于比例規(guī)則枝冀。然而舞丛，CSS比例不總是每個問題的最佳解決方案。CSS寬度是相對于最近的包含父元素果漾。如果你想使用顯示窗口的寬度或高度而不是父元素的寬度將會怎么樣球切？這正是vh和vw單位所提供的。
vh等于viewport高度的1/100.例如绒障，如果瀏覽器的高是900px,1vh求得的值為9px吨凑。同理，如果顯示窗口寬度為750px,1vw求得的值為7.5px。
這些規(guī)則表面上看起來有無盡的用途鸵钝。例如糙臼，做一個占滿高度的或者接近占滿高度的幻燈片，可以用一個非常簡單的方法實現(xiàn)恩商，只要用一行CSS：
.slide {
height: 100vh;
}
設想你想要一個占滿屏幕寬度的標題变逃。為做到這一點，你將會用vw來設置一個字體大小怠堪。這個大小將會隨著瀏覽器的寬度按比例縮放揽乱。
視窗單位: vw, vh的兼容性列表。
vmin 和 vmax
vh和vm總是與視口的高度和寬度有關粟矿，與之不同的凰棉，vmin和vmax是與這次寬度和高度的最大值或最小值有關，取決于哪個更大和更小陌粹。例如撒犀，如果瀏覽器設置為1100px寬、700px高申屹，1vmin會是7px,1vmax為11px绘证。然而，如果寬度設置為800px哗讥，高度設置為1080px嚷那，1vmin將會等于8px而1vmax將會是10.8px。
所以你什么時候可能用到這些值杆煞？
設想你需要一個總是在屏幕上可見的元素魏宽。使用高度和寬度設置為低于100的vmin值將可以實現(xiàn)這個效果。例如决乎，一個正方形的元素總是至少接觸屏幕的兩條邊可能是這樣定義的：
.box {
height: 100vmin;
width: 100vmin;
}
如果你需要一個總是覆蓋可視窗口的正方形(一直接觸屏幕的四條邊),使用相同的規(guī)則只是把單位換成vmax
队询。
.box {
height: 100vmax;
width: 100vmax;
}
這些規(guī)則的組合提供了一個非常靈活的方式，用新的构诚、令人興奮的方式利用你的可視窗口的大小蚌斩。
Viewport units: vmin, vmax兼容列表。
ex 和 ch
ex和ch單位范嘱，與em和rem相似送膳，依賴于當前字體和字體大小。然而丑蛤，與em和rem不同的是叠聋，這兩個單位只也依賴于font-family，因為它們被定為基于特殊字體的法案受裹。
ch單位碌补，或者字符單位被定義為0字符的寬度的“先進的尺寸”。在“Eric Meyer’s的博客”中可以找到一些非常有趣的討論關于這意味著什么，但是基本的概念是厦章，給定一個等寬字體的字體镇匀，一個N個字符單位寬的盒子，比如width：40ch;,可以一直容納一個有40個字符的應用那個特定字體的字符串闷袒。雖然這個特殊規(guī)則的傳統(tǒng)用途與列出盲文有關坑律，但是這里創(chuàng)造性的可行性一定會超越這些簡單的用途。
ex單位被定義為”當前字體的x-height或者一個em的一半”囊骤。給定的字體的x-height是指那個字體的小寫x的高度晃择。通常，這是這個字體的中間的標志也物。
x-height:小寫字母x的高度(閱讀更多關于The Anatomy of Web Typography)
對于這種單位有很多的用途宫屠，大多數(shù)是用于排版的微調。例如滑蚯，sup元素,代表上標浪蹂，可以用相對定位和一個1ex的底部值在行內被推高。類似地告材，你可以拉低一個下標元素坤次。瀏覽器默認支持這些利用上標和下標特性的vertical-align規(guī)則，但是如果你想要更精細的控制斥赋，你可以像這樣更明確的處理樣式：
sup {
position: relative;
bottom: 1ex;
}
sub {
position: relative;
bottom: -1ex;
}
ex單位在CSS1中已經(jīng)存在缰猴，但是你不會找到對ch單位有像這樣堅實的支持。
具體支持疤剑，在Eric Meyer’s 的博客中查看CSS單位和值滑绒。
結論
密切關注CSS的持續(xù)發(fā)展和擴張是非常重要的，一邊在你的工具集里知道所有的工具隘膘。也許你會遇到一個特殊的問題需要一個意想不到的解決方案疑故，利用這些更隱蔽的計量單位之一⊥渚眨花時間去閱讀新規(guī)范纵势，記錄來自好的資源的新聞資訊！
原文出處： @Jonathan Cutrell 譯文出處：w3cplus - 白粥
