web前端入門到實戰：7種必須知道的CSS長度單位

時間 2020-02-10

原文原文鏈接

衆所周知CSS技術咱們雖然很熟悉，在使用的過程卻很容易被困住，這讓咱們在新問題出現的時候變得很不利。隨着web繼續不斷地發展，對於新技術新解決方案的要求也會不斷增加。所以，做爲網頁設計師和前端開發人員，咱們別無選擇，必須熟悉咱們手上的工具，作到知己知彼，這樣才能百戰不殆。html

這就意味着有那麼些個特別的貨，雖然日常都不怎麼會用上，可是一旦某個地方須要它們了，他們就真的是特麼得合適不過來了呢。前端

rem

咱們首先介紹下和咱們熟悉的很類似的貨。 em 被定義爲相對於當前對象內文本的字體大小。炒個栗子，若是你給body小哥設置了font-size字體大小，那麼body小哥的任何子元素的1em就是等於body設置的font-size。web

<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。解釋來講，就是他從body爹爹那裏繼承的字體大小（這裏是14px）的1.2倍，結果就是16.8px。瀏覽器

可是，若是你用em一層一層級聯得定義嵌套元素的字體大小又會花生什麼事情呢？在下面這一小段代碼裏咱們應用了和上面同樣同樣的CSS，每個div都從它上一級父元素繼承了字體大小，而且逐漸得增長。ide

<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>
web前端開發學習Q-q-u-n：⑦⑧④-⑦⑧③-零①②，分享學習的方法和須要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻）

雖然在某些地方這正是咱們想要的，可是一般狀況下咱們仍是但願就依賴單一的相對度量單位就好。這時候嘛，咱們就可使用 rem 了。 ‘r’是「root」的縮寫，意思就是1rem等於根元素的字體大小；大部分狀況下，根元素就是 <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 and vw

響應式 Web設計離不開百分比。可是，CSS百分比並非全部的問題的最佳解決方案。CSS的寬度是相對於包含它的最近的父元素的寬度的。可是若是你就想用視口（viewpoint）的寬度或者高度，而不是父元素的，那該腫麼辦？這就是 vh 和 vw 單位爲咱們提供的。設計

1 vh 等於1/100的視口高度。栗子：瀏覽器高度900px, 1 vh = 900px/100 = 9 px。同理，若是視口寬度未750， 1 vw = 750px/100 = 7.5 px。

能夠想象到的，他們有不少不少的用途。好比，咱們用很簡單的方法只用一行CSS代碼就實現同屏幕等高的框。

.slide {
    height: 100vh;
}

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

vmin and vmax

vh 和 vm 依據於視口的高度和寬度，相對的， vmin 和 vmax 則關於視口高度和寬度二者的最小或者最大值。好比，瀏覽器的寬度設置爲1100px，高度設置爲700px， 1vmin = 1px， 1vmax = 11px。若是寬度設置爲800px,高度設置爲1080px, 1vmin 就等於8px, 1vmax 則未10.8px。

那麼問題來了，咱們應該在什麼場景下使用這兩個單位呢？

假設有一個元素，你須要讓它始終在屏幕上可見。只要對其高度和寬度使用vmin單位，並賦予其低於100的值就能夠作到了。再來個栗子，能夠這樣定義一個至少有兩個邊觸摸到屏幕的方形：

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

若是你要讓這個方形框框始終鋪滿整個視口的可見區域（四邊始終觸摸到屏幕的四邊）

.box {
    height: 100vmax;
    width: 100vmax;
}
web前端開發學習Q-q-u-n：⑦⑧④-⑦⑧③-零①②，分享學習的方法和須要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻）

結合使用這些單位能夠爲咱們提供一個新穎有意思的方式來靈活地利用咱們視口的大小。

ex and ch

ex 和 ch 單位，相似於 em 和 rem , 依賴於當前的字體和字體大小。可是，不一樣的是，這兩貨是基於字體的度量單位，依賴於設定的字體。

ch 單位一般被定義爲數字0的寬度。你能夠在Eric Meyers的博客裏找到關於它的一些有意思的討論，例如將一個等寬字體的字母」N」的寬度設置爲 40ch ，那麼在另外一種類型的字體裏它卻能夠包含40個字母。這個單位的傳統用途主要是盲文的排版，可是除此以外，確定還有能夠應用他的地方。

ex 定義爲當前字體的小寫 x 字母的高度或者 1/2 的 1em 。不少時候，它是字體的中間標誌。

x-height; the height of the lower case x

這些單位有不少用途，大部分用於版式的微調。比方說， sup 元素（上角文字標），能夠經過 position:relative;bottom: 1ex; 實現。相似的方法，你能夠實現一個下角文字標。瀏覽器默認的方式是利用

上標和下標特定垂直對齊規則，可是若是你想更細粒度更精確得控制，你能夠像下面這樣作：

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

結論

持續關注不斷髮展壯大的CSS技術無疑是很重要的，這樣你才能掌握你所持有的工具的所有技能。說不定未來你遇到的某個特殊的問題就須要使用這些複雜的單位來解決。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。