CSS：7個你可能不認識的單位

peixn 發(fā)布于2019-08-28 18:02 / 1659人閱讀

摘要：原文譯文個你可能不知道的單位譯者眾所周知，當使用技術(shù)的時候，很容被一些奇異問題給困住。今天，我就介紹一些你之前可能不知道的屬性，是一些例如和測量方面的單位，但是很有可能你之前都沒聽過這些。然而，對于每一個問題，百分比并不是最好的解決方案。

原文：7 CSS Units You Might Not Know About

譯文：7個你可能不知道的CSS單位

譯者：dwqs

眾所周知，當使用CSS技術(shù)的時候，很容被一些奇異問題給困住。而當我們面對新的問題時，這會讓我們處于非常不利的位置。

但是，伴隨著Web的發(fā)展，新的解決方案也在慢慢成熟。因此，作為一個Web設(shè)計和前端開發(fā)人員，除了對我們使用的工具或?qū)傩苑浅Ａ私獠⒛苁炀氝\用，已經(jīng)別無選擇了。

這也意味著，對于那些特別的工具或?qū)傩裕词蛊匠：苌偈褂茫钱斝枰臅r候，我們也能很好的把它運用到工作中。

今天，我就介紹一些你之前可能不知道的CSS 屬性，是一些例如px和ems測量方面的單位，但是很有可能你之前都沒聽過這些。一起來看看吧。

rem

從與我們已經(jīng)熟悉的但很相似的單位開始介紹。em被定義為相對于當前對象內(nèi)文本的字體大小。如果你給body元素設(shè)置了一個字體大小，那么body的任何子元素的em值都等于body設(shè)置的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一層一層級聯(lián)得定義嵌套元素的字體大小又會花生什么事情呢？在下面這一小段代碼里我們應(yīng)用了和上面一樣一樣的CSS，每一個div都從它上一級父元素繼承了字體大小，并且逐漸得增加。

雖然在某些地方這正是我們想要的，但是通常情況下我們還是希望就依賴單一的相對度量單位就好。這時，就應(yīng)該用rem了，rem中的r代表根元素，它的值就是根元素設(shè)置的字體大小。在大多數(shù)情況下，根元素就是html了。

html {
    font-size: 14px;
}
div {
    font-size: 1.2rem;
}

這樣在上面的那三個嵌套的div娃們的字體大小都是 1.2*14px = 16.8px 了。

適用于網(wǎng)格布局

Rems不僅適用于字體大小，也用于網(wǎng)格布局。例如，你可以用基于html根元素字體大小的rem作為整個網(wǎng)格布局或者UI庫的大小單位，然后在其他特定的地方用em單位。這樣將會給你帶來更多的字體大小和伸縮的可控性，

.container {
    width: 70rem; // 70 * 14px = 980px
}

概念上來說，這個方法的思想就是讓你的界面根據(jù)你的內(nèi)容進行縮放。但是，這樣做并不是對所有的情況都有意義。

vh和vw

響應(yīng)式Web設(shè)計對百分比規(guī)則有很大的依賴性。然而，對于每一個問題，CSS百分比并不是最好的解決方案。CSS寬度是相對于包含它的最近的父元素的寬度的。如果你想使用的是視口的高度或?qū)挾龋皇歉冈氐模且[么辦呢？vh和vw就能滿足這個需求了。

1vh等于1%的視口高度。例如，瀏覽器高度是900px，那么1vh = 900*1%=9px，同理，若視口寬度是750px,則1vw是7.5px。

它們的用途很廣泛。比如，我們用很簡單的方法只用一行CSS代碼就實現(xiàn)同屏幕等高的框。

.slide {
    height: 100vh;
}

假設(shè)你要來一個和屏幕同寬的標題，你只要設(shè)置這個標題的font-size的單位為vm，那標題的字體大小就會自動根據(jù)瀏覽器的寬度進行縮放，以達到字體和viewport大小同步的效果，有木有？！

vmin和vmax

vh和vw是相對于視口的寬度和高度，而vmin和vmax則關(guān)于視口高度和寬度兩者的最小或者最大值。例如，如果瀏覽器的高寬分別為700px和1100px，則1vmin=7px，1vmax=11px；如果高寬分別是1080px和800px,則1vmin=8px,1vmax=10.8px。

那么什么時候需要這些值呢？

假設(shè)有一個元素，你需要讓它始終在屏幕上可見。只要對其高度和寬度使用vmin單位，并賦予其低于100的值就可以做到了。例如，可以這樣定義一個至少有兩個邊觸摸到屏幕的方形：

.box {
    height: 100vmin;
    width: 100vmin;
}

如果你要讓這個方形框框始終鋪滿整個視口的可見區(qū)域（四邊始終觸摸到屏幕的四邊）：

.box {
    height: 100vmax;
    width: 100vmax;
}

結(jié)合使用這些單位可以為我們提供一個新穎有意思的方式來靈活地利用我們視口的大小。

ex和ch

單位ex和ch，就跟em和rem類似，取決于當前的字體和字體大小。然而，跟em和rem不同的是，ex和ch是基于字體的度量單位，依賴于設(shè)定的字體。

單位ch通常被定義為數(shù)字0的寬度。你可以在Eric Meyers的博客里找到關(guān)于它的一些有意思的討論，例如將一個等寬字體的字母”N”的寬度設(shè)置為40ch,那么在另一種類型的字體里它卻可以包含40個字母。這個單位的傳統(tǒng)用途主要是盲文的排版，但是除此之外，肯定還有可以應(yīng)用他的地方。

單位ex定義為當前字體的小寫x的高度或者1/2的em。很多時候，它是字體的中間標志。

x-height; the height of the lower case x（read more about The Anatomy of Web Typography）

他們有很多的用途，但是大部分用于版式的微調(diào)。比如，sup元素（上角標字符），可以利用position:relative;bottom: 1ex;實現(xiàn)，同理，可以實現(xiàn)一個下角標文字。瀏覽器默認的處理方式是利用上標和下標特定垂直對齊規(guī)則，但是如果你想更細粒度更精確得控制，你可以像下面這樣做：

sup {
    position: relative;
    bottom: 1ex;
}
sub {
    position: relative;
    bottom: -1ex;
}

總結(jié)

持續(xù)關(guān)注CSS的發(fā)展和擴展是非常重要的，這樣你才能熟練運用你工具箱中特定的工具。說不定將來你遇到的某個特殊的問題就需要使用這些復(fù)雜的單位來解決。花點時間去閱讀新的技術(shù)規(guī)范，注冊訂閱一些不錯的網(wǎng)站或者資源，類似 cssweekly這樣的。當然不要忘記現(xiàn)在就去注冊像Tuts+這樣的網(wǎng)站來獲取每周的更新，課程，免費教程還有資源！

擴展閱讀

More CSS unit goodness.

Taking the “Erm..” Out of Ems

Taking Ems Even Further

Caniuse Viewport units

原文首發(fā)：http://www.ido321.com/1301.html