資訊專欄INFORMATION COLUMN
摘要：原文譯文個你可能不知道的單位譯者眾所周知，當使用技術的時候，很容被一些奇異問題給困住。今天，我就介紹一些你之前可能不知道的屬性，是一些例如和測量方面的單位，但是很有可能你之前都沒聽過這些。然而，對于每一個問題，百分比并不是最好的解決方案。
原文：7 CSS Units You Might Not Know About
譯文：7個你可能不知道的CSS單位
譯者：dwqs
眾所周知，當使用CSS技術的時候，很容被一些奇異問題給困住。而當我們面對新的問題時，這會讓我們處于非常不利的位置。
但是，伴隨著Web的發展，新的解決方案也在慢慢成熟。因此，作為一個Web設計和前端開發人員，除了對我們使用的工具或屬性非常了解并能熟練運用，已經別無選擇了。
這也意味著，對于那些特別的工具或屬性，即使平常很少使用，但是當需要的時候，我們也能很好的把它運用到工作中。
今天，我就介紹一些你之前可能不知道的CSS 屬性，是一些例如px和ems測量方面的單位，但是很有可能你之前都沒聽過這些。一起來看看吧。
rem從與我們已經熟悉的但很相似的單位開始介紹。em被定義為相對于當前對象內文本的字體大小。如果你給body元素設置了一個字體大小，那么body的任何子元素的em值都等于body設置的font-size。
Test
body {
font-size: 14px;
}
div {
font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}
div中的字體大小是1.2em，也就是div從父類元素繼承的字體大小的1.2倍。在這里，body的字體是14px，那么div的字體大小是1.2*14=16.8px.
但是，如果你用em一層一層級聯得定義嵌套元素的字體大小又會花生什么事情呢？在下面這一小段代碼里我們應用了和上面一樣一樣的CSS，每一個div都從它上一級父元素繼承了字體大小，并且逐漸得增加。
Test
Test
Test
雖然在某些地方這正是我們想要的，但是通常情況下我們還是希望就依賴單一的相對度量單位就好。這時，就應該用rem了，rem中的r代表根元素，它的值就是根元素設置的字體大小。在大多數情況下，根元素就是html了。
html {
font-size: 14px;
}
div {
font-size: 1.2rem;
}
這樣在上面的那三個嵌套的div娃們的字體大小都是 1.2*14px = 16.8px 了。
適用于網格布局Rems不僅適用于字體大小，也用于網格布局。例如，你可以用基于html根元素字體大小的rem作為整個網格布局或者UI庫的大小單位，然后在其他特定的地方用em單位。這樣將會給你帶來更多的字體大小和伸縮的可控性，
.container {
width: 70rem; // 70 * 14px = 980px
}
概念上來說，這個方法的思想就是讓你的界面根據你的內容進行縮放。但是，這樣做并不是對所有的情況都有意義。
vh和vw響應式Web設計對百分比規則有很大的依賴性。然而，對于每一個問題，CSS百分比并不是最好的解決方案。CSS寬度是相對于包含它的最近的父元素的寬度的。如果你想使用的是視口的高度或寬度，而不是父元素的，那要腫么辦呢？vh和vw就能滿足這個需求了。
1vh等于1%的視口高度。例如，瀏覽器高度是900px，那么1vh = 900*1%=9px，同理，若視口寬度是750px,則1vw是7.5px。
它們的用途很廣泛。比如，我們用很簡單的方法只用一行CSS代碼就實現同屏幕等高的框。
.slide {
height: 100vh;
}
假設你要來一個和屏幕同寬的標題，你只要設置這個標題的font-size的單位為vm，那標題的字體大小就會自動根據瀏覽器的寬度進行縮放，以達到字體和viewport大小同步的效果，有木有？！
vmin和vmaxvh和vw是相對于視口的寬度和高度，而vmin和vmax則關于視口高度和寬度兩者的最小或者最大值。例如，如果瀏覽器的高寬分別為700px和1100px，則1vmin=7px，1vmax=11px；如果高寬分別是1080px和800px,則1vmin=8px,1vmax=10.8px。
那么什么時候需要這些值呢？
假設有一個元素，你需要讓它始終在屏幕上可見。只要對其高度和寬度使用vmin單位，并賦予其低于100的值就可以做到了。例如，可以這樣定義一個至少有兩個邊觸摸到屏幕的方形：
.box {
height: 100vmin;
width: 100vmin;
}
如果你要讓這個方形框框始終鋪滿整個視口的可見區域（四邊始終觸摸到屏幕的四邊）：
.box {
height: 100vmax;
width: 100vmax;
}
結合使用這些單位可以為我們提供一個新穎有意思的方式來靈活地利用我們視口的大小。
單位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;實現，同理，可以實現一個下角標文字。瀏覽器默認的處理方式是利用上標和下標特定垂直對齊規則，但是如果你想更細粒度更精確得控制，你可以像下面這樣做：
sup {
position: relative;
bottom: 1ex;
}
sub {
position: relative;
bottom: -1ex;
}
總結
持續關注CSS的發展和擴展是非常重要的，這樣你才能熟練運用你工具箱中特定的工具。說不定將來你遇到的某個特殊的問題就需要使用這些復雜的單位來解決。花點時間去閱讀新的技術規范，注冊訂閱一些不錯的網站或者資源，類似 cssweekly這樣的。 當然不要忘記現在就去注冊像Tuts+這樣的網站來獲取每周的更新，課程，免費教程還有資源！
擴展閱讀More CSS unit goodness.
Taking the “Erm..” Out of Ems
Taking Ems Even Further
Caniuse Viewport units
原文首發：http://www.ido321.com/1301.html
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110977.html
摘要：歡迎來我的個人站點性能優化其他優化瀏覽器關鍵渲染路徑開啟性能優化之旅高性能滾動及頁面渲染優化理論寫法對壓縮率的影響唯快不破應用的個優化步驟進階鵝廠大神用直出實現網頁瞬開緩存網頁性能管理詳解寫給后端程序員的緩存原理介紹年底補課緩存機制優化動 歡迎來我的個人站點 性能優化 其他 優化瀏覽器關鍵渲染路徑 - 開啟性能優化之旅 高性能滾動 scroll 及頁面渲染優化 理論 | HTML寫法...
摘要：不要使用類函數終于，你不用再看到建議不要使用函數的提示了。因為從核心上完全移除了它們，這意味著請你移步至更好的類函數，或者更靈活的層。將從數據庫獲取一個元數據，如果您正在循環訪問特定文章的元數據，則可以在循環中使用它。 showImg(https://segmentfault.com/img/bV75FM?w=1024&h=534); 1. 不要使用 mysql_ 類函數 終于，你不用...
閱讀 2965·2021-11-23 10:12
閱讀 2690·2021-11-23 09:51
閱讀 2040·2021-11-15 11:37
閱讀 1352·2019-08-30 15:55
閱讀 1964·2019-08-29 15:40
閱讀 1165·2019-08-28 18:30
閱讀 1650·2019-08-28 18:02
閱讀 2640·2019-08-26 12:00
