Photo by Charles Deluvio on Unsplash
介紹
我決定寫這個博客的目的是希望探索更多有關使用CSS調整大小的方法。 有這麼多種可能性，很容易感到不知所措和困惑。 瀏覽器當前支持16種度量單位：像素，英寸，皮卡，釐米，毫米，點，百分比，em，rem，視口尺寸（vw，vh），ex，ch，Vmax（最大視口）和vmin （viewportmin）在這16個單位中有兩類：相對長度和絕對長度。
相對長度
首先要了解相對長度，它們會在其他物體上獲得尺寸，這些尺寸在您要設定尺寸的元素之外或相對於它們，例如，父級的尺寸，字體大小和視口尺寸。
百分比
百分比基於其父元素。 因此，如果一個元素為200px * 200px，並且該元素的子元素的寬度為50％，高度為50％，則該子元素的等效尺寸為100px * 100px，因為200px的50％為100px。
在這裡，我們有一個名為" parent-box"的div元素和一個名為" child-box"的子div元素。
在css文件中，我將父盒的高度和寬度設置為200px，子盒的寬度和高度設置為50％，這意味著現在子盒將是父盒尺寸的50％，因此 如果父框為200px * 200px，則表示子框為100px * 100px，結果如下：
如您所見，藍色元素（即子元素）正好是粉紅色框（即父元素）的50％。
視口尺寸
當前有四種類型的視口尺寸單位，vw（視口寬度），vh（視口高度），vmin（視口最小）和vmax（視口最大）。 使用這些單位時要知道的第一件事是，它們會自動將瀏覽器的屏幕劃分為100 x 100的不可見網格，網格中的每個正方形或單位將根據情況代表一個vw，vh，vmin或vmax。
vh 與 vw
因此，讓我們更深入地研究這兩個。 如果我們聲明一個元素的寬度為50vw且高度為50vh，我們將看到該元素將恰好佔據頁面高度的一半，並且佔據頁面寬度的一半，每個vw或vh現在相當於那個不可見的100 *中的一個單元 100，所以如果我們聲明一個元素為50vw，它將是瀏覽器寬度的一半，下面我們來看一個示例。
在這裡，我們看到父元素恰好是瀏覽器高度和寬度的一半。
vmin和vmax
這些單位比較棘手。 因此，這些單元的工作方式是將使用高度或寬度的最大或最小長度。 例如，讓我們聲明父框的寬度為50vmax，如果瀏覽器的寬度為800px，高度為500px，則父框的寬度為400px，因為寬度大於高度，所以 元素將從瀏覽器的水平部分的不可見網格中獲取50個單位，現在，如果高度為1000px，寬度為500px，則父框的寬度現在為500px，因為瀏覽器的高度現在大於寬度，因此父元素 box將佔據瀏覽器垂直邊100平方中的50平方，並使用它來聲明父對象的框寬。
現在進入vmin。 假設我們聲明父級框的寬度為50vmin，那麼從最小視口尺寸開始，父級框的寬度將佔據50個網格單位。 同樣的示例，如果瀏覽器的寬度為800px，高度為500px，則父框的寬度現在將為250px，因為我們聲明父框的寬度為最小視口尺寸的50個單位， 在這種情況下，是高度。 現在，如果高度為1000像素，寬度為600像素，則父框的寬度現在為300像素，我知道這非常令人困惑，因此讓我們回到第一個示例：
Here we declare the width to be 50vmax (50 units out of 100 from the BIGGEST viewport dimension)
這樣看起來像這樣：
我們可以看到父框現在恰好是瀏覽器寬度長度的一半，這是因為瀏覽器的寬度大於高度。 現在，如果我們改變一切，將會得到不同的結果。
Here we declare the width to be 50vmin (50 units out of 100 from the SMALLEST viewport dimension)
所以看起來像這樣：
我們可以看到父框現在恰好是瀏覽器高度的一半，這是因為瀏覽器的高度小於寬度。
基於字體屬性的單位
ex 和 ch
我從未使用過這些單元，但讓我們看看它們是如何工作的。 所以首先讓我們從ex開始。 這個單位測量您正在使用的任何字體系列的字母" X"的高度，這是指字母" X"的高度？ 因此，如果此" X"的高度為10px（字面的字母為" X"），則1ex將為10px，假設您使用的是另一個字體系列中的" X"，其中" X"的高度為9px，所以現在1ex 是9px。
ch的行為方式非常相似，不同之處在於1ch的長度將基於字體家族的字母" O"的寬度，因此，如果字母" O"的寬度為5px，則1ch將等於5px 。
em
此單位響應父元素的字體大小，因此，如果父元素的字體大小為10px，則每個em現在等於10 px。
在這裡，我們在父框內聲明一個10px字體大小，並將子元素的寬度和高度設置為5em，因此，如果父元素的字體大小為10px，則意味著每個em值10px，因此我們的子元素將為50px * 50像素
em的作用是它們級聯，這意味著什麼？ 因此，如果子元素內有另一個元素，並且將其尺寸設置為5em，則第二個子元素將為100px * 100px
發生這種情況的原因是，當一個孩子中有另一個元素時，第二個孩子會將值乘以2，瘋狂嗎？ 這就是為什麼在使用em時我們必須小心。
rem
現在，rem與em有所不同，因為rem基於根字體大小而不是父字體來確定其尺寸。 rem一詞的意思是" root em"，這解決了我們在em元素級聯時遇到的問題，通過基於root取其維度，rem值在整個文件中都相同。 因此，讓我們看一下相同的示例，但帶有rem。
因此，如果將本示例與上面的示例進行比較，我們可以看到父框的字體大小現在為30，但是第一個和第二個子控件的字體大小較小，我們還可以看到元素沒有級聯， 是因為以10px的字體大小聲明瞭根，所以無論何時我們現在使用rem，它都將始終引用10px。
絕對長度
絕對長度不會根據其他因素或頁面，父級，視口等其他因素來決定其大小。
英寸，釐米和毫米。
因此，我覺得關於這些度量單位的解釋很多。 如果您將某物聲明為1in，則無論屏幕大小如何，該值都將為1in。 釐米和毫米也一樣
Points和Picas
因此，points和picas是印刷術語。 point是1/72英寸，因此很小，12點活字就是12點或1/6英寸。
最後但並非最不重要…
像素！
現在，像素是絕對長度，但是它們的大小可能取決於您所使用的設備，某些設備的像素比其他設備大，這取決於它們的密度和分辨率。
(本文翻譯自Sebastian Delima的文章《CSS: Units Of Measurement (px, em, rem, vw, %, etc.)》，參考：https://medium.com/swlh/css-units-of-measurement-px-em-rem-vw-etc-ed8522620775)
閱讀更多 聞數起舞 的文章
