原文：7 css units you might not know about
眾所周知，當使用css技術的時候，很容被一些奇異問題給困住。而當我們面對新的問題時，這會讓我們處於非常不利的位置。
但是，伴隨著web的發展，新的解決方案也在慢慢成熟。因此，作為乙個web設計和前端開發人員，除了對我們使用的工具或屬性非常了解並能熟練運用，已經別無選擇了。
這也意味著，對於那些特別的工具或屬性，即使平常很少使用，但是當需要的時候，我們也能很好的把它運用到工作中。
rem
從與我們已經熟悉的但很相似的單位開始介紹。em被定義為相對於當前物件內文字的字型大小。如果你給body元素設定了乙個字型大小，那麼body的任何子元素的em值都等於body設定的font-size。
body
>
<
divclass
="test"
>test
div>
body
>
div
div中的字型大小是1.2em，也就是div從父類元素繼承的字型大小的1.2倍。在這裡，body的字型是14px，那麼div的字型大小是1.2*14=16.8px.
但是，如果你用em一層一層級聯得定義巢狀元素的字型大小又會花生什麼事情呢？在下面這一小段**裡我們應用了和上面一樣一樣的css，每乙個div都從它上一級父元素繼承了字型大小，並且逐漸得增加。
body
>
<
div>
test
<
div>
test
<
div>
test
div>
div>
div>
body
>
雖然在某些地方這正是我們想要的，但是通常情況下我們還是希望就依賴單一的相對度量單位就好。這時，就應該用rem了，rem中的r代表根元素，它的值就是根元素設定的字型大小。在大多數情況下，根元素就是html了。
div
這樣在上面的那三個巢狀的div娃們的字型大小都是 1.2*14px = 16.8px 了。
適用於網格布局
rems不僅適用於字型大小，也用於網格布局。例如，你可以用基於html根元素字型大小的rem作為整個網格布局或者ui庫的大小單位，然後在其他特定的地方用em單位。這樣將會給你帶來更多的字型大小和伸縮的可控性，
概念上來說，這個方法的思想就是讓你的介面根據你的內容進行縮放。但是，這樣做並不是對所有的情況都有意義。
vh和vw
響應式web設計對百分比規則有很大的依賴性。然而，對於每乙個問題，css百分比並不是最好的解決方案。css寬度是相對於包含它的最近的父元素的寬度的。如果你想使用的是視口的高度或寬度，而不是父元素的，那要腫麼辦呢？vh和vw就能滿足這個需求了。
1vh等於1%的視口高度。例如，瀏覽器高度是900px，那麼1vh = 900*1%=9px，同理，若視口寬度是750px,則1vw是7.5px。
它們的用途很廣泛。比如，我們用很簡單的方法只用一行css**就實現同螢幕等高的框。
假設你要來乙個和螢幕同寬的標題，你只要設定這個標題的font-size的單位為vm，那標題的字型大小就會自動根據瀏覽器的寬度進行縮放，以達到字型和viewport大小同步的效果，有木有？！
demo
vmin和vmax
vh 和vw是相對於視口的寬度和高度，而vmin和vmax則關於視口高度和寬度兩者的最小或者最大值。例如，如果瀏覽器的高寬分別為700px和 1100px，則1vmin=7px，1vmax=11px；如果高寬分別是1080px和800px,則 1vmin=8px,1vmax=10.8px。
那麼什麼時候需要這些值呢？
假設有乙個元素，你需要讓它始終在螢幕上可見。只要對其高度和寬度使用vmin單位，並賦予其低於100的值就可以做到了。例如，可以這樣定義乙個至少有兩個邊觸控到螢幕的方形：
如果你要讓這個方形框框始終鋪滿整個視口的可見區域（四邊始終觸控到螢幕的四邊）：
結合使用這些單位可以為我們提供乙個新穎有意思的方式來靈活地利用我們視口的大小。
ex和ch
單位ex和ch，就跟em和rem類似，取決於當前的字型和字型大小。然而，跟em和rem不同的是，ex和ch是基於字型的度量單位，依賴於設定的字型。
單位ch通常被定義為數字0的寬度。你可以在eric meyers的部落格裡找到關於它的一些有意思的討論，例如將乙個等寬字型的字母」n」的寬度設定為40ch,那麼在另一種型別的字型裡它卻可以包含40個字母。這個單位的傳統用途主要是盲文的排版，但是除此之外，肯定還有可以應用他的地方。
單位ex定義為當前字型的小寫x的高度或者1/2的em。很多時候，它是字型的中間標誌。
x-height; the height of the lower case x（read more about the anatomy of web typography）
他們有很多的用途，但是大部分用於版式的微調。比如，sup元素（上角標字元），可以利用position:relative;bottom: 1ex;實現，同理，可以實現乙個下角標文字。瀏覽器預設的處理方式是利用上標和下標特定垂直對齊規則，但是如果你想更細粒度更精確得控制，你可以像下面這樣做：
sub
總結
持續關注css的發展和擴充套件是非常重要的，這樣你才能熟練運用你工具箱中特定的工具。說不定將來你遇到的某個特殊的問題就需要使用這些複雜的單位來解決。花點時間去閱讀新的技術規範，註冊訂閱一些不錯的**或者資源，類似cssweekly這樣的。 當然不要忘記現在就去註冊像tuts+這樣的**來獲取每週的更新，課程，免費教程還有資源！
擴充套件閱讀
more css unit goodness.
原文首發：
7個你可能不認識的CSS單位
今兒，我就準備向大夥兒介紹一些你們之前可能很少見過css傢伙們。他們每個都是度量的單位，類似pixel 和 em 這樣的，但是很有可能你之前從來就沒聽過這些傢伙們！就讓我們一起來交個朋友吧 我們首先介紹下和我們熟悉的很相似的貨。em 被定義為相對於當前物件內文字的字型大小。炒個栗子，如果你給body...
7個你可能不認識的CSS單位
眾所周知css技術我們雖然很熟悉，在使用的過程卻很容易被困住，這讓我們在新問題出現的時候變得很不利。隨著web繼續不斷地發展，對於新技術新解決方案的要求也會不斷增長。因此，作為網頁設計師和前端開發人員，我們別無選擇，必須熟悉我們手上的工具，做到知己知彼，這樣才能百戰不殆。這就意味著有那麼些個特別的貨...
7個你可能不認識的css單位
眾所周知css技術我們雖然很熟悉，在使用的過程卻很容易被困住，這讓我們在新問題出現的時候變得很不利。隨著web繼續不斷地發展，對於新技術新解決方案的要求也會不斷增長。因此，作為網頁設計師和前端開發人員，我們別無選擇，必須熟悉我們手上的工具，做到知己知彼，這樣才能百戰不殆。這就意味著有那麼些個特別的貨...