rem em
我們將從你已經熟悉的東西開始。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.
當你在每個元素內都級聯em定義的字體大小將會發生什么？在下面的代碼片段中我們應用和上面一模一樣的CSS.每個div從它們的父節點繼承字體大小，帶給我們逐漸增加的字體大小。
<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基於根元素進行設置；在大多數情況下根元素為html元素。
html { font-size: 14px; } div { font-size: 1.2rem; }
rem不是只對定義字體大小有用。比如，你可以使用rem把整個網格系統或者UI樣式庫基於HTML根元素的字體大小上,然后在特定的地方使用em比例縮放
container { width: 70rem; // 70 * 14px = 980px }
vh和vw (ie11 以上都兼容)
響應式網頁設計技術很大程度上依賴於比例規則。然而，CSS比例不總是每個問題的最佳解決方案。CSS寬度是相對於最近的包含父元素。如果你想使用顯示窗口的寬度或高度而不是父元素的寬度將會怎么樣？這正是vh和vw單位所提供的。
vh等於viewport高度的1/100.例如，如果瀏覽器的高是900px,1vh求得的值為9px。同理，如果顯示窗口寬度為750px,1vw求得的值為7.5px。
這些規則表面上看起來有無盡的用途。例如，做一個占滿高度的或者接近占滿高度的幻燈片，可以用一個非常簡單的方法實現，只要用一行CSS：
.slide { height: 100vh; }
vmin 和 vmax（ie11不兼容）
vh和vm總是與視口的高度和寬度有關，與之不同的，vmin和vmax是與這次寬度和高度的最大值或最小值有關，取決於哪個更大和更小。例如，如果瀏覽器設置為1100px寬、700px高，1vmin會是7px,1vmax為11px。然而，如果寬度設置為800px，高度設置為1080px，1vmin將會等於8px而1vmax將會是10.8px。
所以你什么時候可能用到這些值？
設想你需要一個總是在屏幕上可見的元素。使用高度和寬度設置為低於100的vmin值將可以實現這個效果。例如，一個正方形的元素總是至少接觸屏幕的兩條邊可能是這樣定義的：
box { height: 100vmin; width: 100vmin; }
如果你需要一個總是覆蓋可視窗口的正方形(一直接觸屏幕的四條邊),使用相同的規則只是把單位換成vmax。
.box { height: 100vmax; width: 100vmax; }
這些規則的組合提供了一個非常靈活的方式，用新的、令人興奮的方式利用你的可視窗口的大小。
0.1.4. ex和ch （ex 幾乎都不支持 ch ie 11 部分不支持，edge 完全支持）
ex和ch單位，與em和rem相似，依賴於當前字體和字體大小。然而，與em和rem不同的是，這兩個單位只也依賴於font-family，因為它們被定為基於特殊字體的法案。