在本文中，我們將探討 CSS 尺寸單位的四大類別。我們將了解這些尺寸單位的用途、它們的最佳工作原理，以及如何在每種情況下選擇最佳尺寸單位，從而在各種媒體和設備尺寸下優化我們的布局。

關于 CSS 尺寸單位

CSS 提供了多種指定元素大小或長度的方式，其中一些更為直觀。CSS 單位可分為四大類：

• 絕對單位，比如cm和px
• 字體相對單位，比如em和ch
• 視口相對單位，比如vw和vmin
• 容器相對單位，比如cqw和cqh

我們將在本文中介紹每種 CSS 單位。

在繼續之前，先明確下后面頻繁提到的有關概念：指定值、計算值和使用值。

• 指定值是文檔樣式表中顯示的 CSS 屬性的值。
• 計算值是瀏覽器應用級聯規則、繼承規則和屬性定義后的屬性值。
• 使用值是瀏覽器進行最終調整和轉換后的屬性值。在此過程中，相對單位會轉換為絕對單位。對于有屏幕的媒體（即有屏幕的設備），物理單位會轉換為等效的像素單位。

絕對單位

絕對單位是特定的、與介質相關的測量值。對于紙張等物理介質，絕對 CSS 單位與相應的物理單位掛鉤。對于屏幕來說，絕對單位為像素。一個像素大約是 1/96英寸。

絕對單位包括 in、cm、mm 和 Q，分別表示英寸、厘米、毫米和四分之一毫米。點（pt）和派卡（pc）也是絕對單位。它們起源于物理排版和桌面出版。每 pt 等于 1/72 英寸，而 1pc 等于 1/6 英寸。下表列出了絕對單位及其等價單位。

單位	名稱	等價于
cm	厘米	1cm?≈?37.8px
mm	毫米	1mm?≈?3.78px
Q	四分之一毫米	1Q?≈?0.944px
in	英寸	1in =?96px
pc	派卡	1pc =?16px?(1/6 of 1 inch)
pt	點	1pt?≈?1.33px?(1/72th?of 1 inch)
px	像素	1px =?1/96th?of 1 inch

當指定元素的寬度為 2in 時，其打印寬度將為 2 英寸。但在屏幕上，2in 的計算值為 192px。

絕對單位不受字體規格、繼承屬性值或視口的影響。在了解輸出介質的物理特性時，使用絕對單位效果最佳。

避免在font-size屬性中使用絕對值。一些低視力用戶會增加瀏覽器的默認字體大小，以提高可讀性。包括 px 在內的絕對值不會隨著這種變化而縮放。因此，應使用字體相對單位。我們將在下一節討論它們。

字體相對單位

字體相對單位使用字體規格來計算元素的尺寸。這可能是font-size或line-height屬性的計算值。或者是相對于特定字形的尺寸進行計算，如 ch、ex 和 ic 單位。

使用字體相對單位時要注意：如果字體尚未加載，它們可能會觸發字體下載。這可能會在速度較慢的網絡或可用性不穩定的網絡上造成布局偏移。

字體相對單位可分為兩類：局部相對單位和根相對單位。

• 局部字體相對單位是相對于元素的font-size屬性的計算值來計算大小的。由于font-size屬性是一個繼承屬性，這通常意味著它是相對于最近的祖先元素的font-size屬性值而言的。
• 根相對單位計算的是相對于文檔根元素的大小，通常是 html 元素的font-size值。

em和rem

你可能對 em 單位以及 rem 單位并不陌生。em 單位表示元素font-size屬性計算值的一個比例。例如，1em 是font-size值的 100%。小于 1 的值，如 0.5em，則為 50% 或 font-size 值的一半。大于 1 的值是一個乘數。

而 rem 單位則是根據根元素的font-size值計算大小。

em 和 rem 大小都是相對于文檔默認字體大小計算的長度。ch、ex 和 ic 單位及其相對于根字體的 rch、rex 和 ric 分別是相對于零、小寫 x 和水字形的大小計算的。

什么是字形？

字形是字符的可視化表示--字面意思是字體使用的字母、數字或標點符號的形狀。一個零字符可以用多種方式表示，如下圖所示。

不同字體的字形尺寸可能會有很大差異；1ch 可能是 5 像素，也可能是 50 像素，這取決于所選字體的度量標準。因此，指定值可能與 ch、ic 和 ex 單位及其根相對的 rch、ric 和 rex 的使用值大不相同。在使用多種字體時，請記住這一點。

零寬單位： ch 和 rch

ch 和 rch 單位基于用于渲染的字體中零字形的寬度或高度進行度量。當文檔的內聯軸為水平軸時，計算基于其寬度。如果內聯軸是垂直的，則根據零字形的高度進行計算。如果瀏覽器無法確定 0 字形的大小，ch 單位就會表現 0 字形為0.5em寬以及1em高。

與 rem 單位類似，rch 單位使用的是根元素字體零字形的寬高進行度量。

X 高度和大寫高度單位：ex/rex 和 cap/rcap

在字體設計中，x-height是指小寫字母 x 字形從基線測量的高度。

使用 ex 單位設置的尺寸是相對于第一個可用字體的已用 x 高度計算的。rex 單位的作用與此類似，但它是相對于根元素的 ex 單位而不是最近的祖先來計算大小的。

另一方面，大寫高度是指從基線到大寫字母頂部的距離，通常是指頂部平坦字母的高度。在某些字體中，尖頂或圓形大寫字母（如 A、O 和 S）的頂端高度可能會稍高一些。

大寫高度單位（cap）是相對于元素第一個可用字體的已用大寫高度來計算的。根相對 rcap 單位使用根元素的cap值作為計算長度的基礎。遺憾的是，目前只有 Firefox 支持cap單位，而任何瀏覽器都不支持 rcap 單位。

有些字體在向瀏覽器公開字體指標方面做得很差，或者缺乏可靠的指標。其他字體可能缺少小寫 x 字形，或使用阿拉伯語等非拉丁字體。當無法從字體本身確定 x 高度時，瀏覽器會使用 0.5em 的備選 x 高度。

當瀏覽器無法從字體中確定大寫高度時，就會使用字體的升角值。升角是小寫字母（如 h 或 b）中超出 x 高度的部分。

表意單位：ic和ric

ic 單單位最適用于中文、日文和韓文字符集。它根據所使用字體的"水 "或"水形表意文字"來計算長度。這三種字符集都使用水形表意文字。

中文、日文和韓文字體中的字形通常具有相同的寬度和高度。因此，對于這些字符集，ic 單位可以很好地將文本限制為每行特定的字形數。

盡管"水"是中文、日文和韓文中的共同表意文字，但并非每種字體都有代表它的字形。當瀏覽器無法確定"水"的測量值時，就會假定測量值為 1em。

與其他字體相對單位一樣，ic 單位是相對于父元素的計算值計算的，而 ric 單位是相對于根元素的計算值計算的。

行高單位：lh和rlh

你還可以使用行高相對單位 lh 及其根相對單位 rlh 來設置長度。lh 單位等于使用該單位元素的line-height屬性的計算值。它是相對于元素的直接祖先計算的。rlh 單位計算的是相對于文檔根元素line-height的長度。

當 line-height 屬性的值為 normal 時，每行的高度基于字體自身的度量。如果值是一個數字（如 line-height：1.3），行高就是font-size與乘數的乘積，以像素為單位。如果值是一個百分比，那么line-height的計算值就是百分比值乘以計算出的字體大小（以像素為單位）。

例如，如果用戶的最小字體大小為 18px，指定的line-height為 1.5，則計算出的行高為 27px。計算出的行高是一個 lh 或 rlh 單位。如果聲明 inline-size: 10lh，則元素寬度為 270 像素（如果內聯軸是垂直的，則元素高度為 270 像素）。

根相對行高單位 rlh 單位使用文檔根元素的已用行高計算長度。本地行高或 lh 單位繼承了祖先元素的行高值。

當項目使用多種字體和/或語言時，ex、cap、ic 和 lh 等單位尤其有用。即使用戶更改了字體設置，也能保持垂直和大小比例。

到目前為止，我們已經介紹了絕對長度和字體相對單位。不過，CSS 還支持另外兩種尺寸單位：視口相對單位和容器相對單位。

視口相對單位

視口相對單位，顧名思義，取決于瀏覽器窗口的尺寸、iframe 或設備尺寸。它們是相對于初始包含塊的大小計算的，如果是分頁媒體，則是視口或頁面。一個視口百分比單位等于初始包含塊的 1%。這與百分比不同，百分比將尺寸設置為父元素寬度或高度的一定比例。

視口百分比單位有點難以理解，部分原因是它們基于視口的四個概念：

• UA 默認視口，可能等于大視口或小視口，或一個中間尺寸
• 大視口，或瀏覽器界面可縮回部分縮回時的可用尺寸
• 小視口，假定瀏覽器界面的可縮回部分已展開
• 動態視口，無論瀏覽器界面是否展開或縮回，動態視口都會存在，并根據可用空間的大小而增大或縮小

例如，iOS 上的 Safari 瀏覽器會在你從頁面頂部向下滾動時隱藏后退按鈕、標簽菜單和其他控件，而在向上滾動時又會重新顯示它們。

每個概念視口都有一組相應的視口單位。UA 默認視口單位包括 vw、vh、vmin 和 vmax。大視口、小視口和動態視口單位遵循類似的命名規則，前綴為 l、s 或 d，即 lvw 或 dvmin。

*vw 和 *vh 單位分別等于初始包含塊寬度和高度的 1%。*vi 和 *vb 單位的作用類似。每個 *vi 單位等于初始包含塊沿內聯軸的 1%，而每個 *vb 單位等于初始包含塊沿塊軸的 1%。內聯軸和塊軸取決于writing-mode屬性的值。當文檔使用垂直書寫模式時，內聯軸為垂直軸，塊軸為水平軸。對于水平書寫模式，內聯軸是水平的，塊軸是垂直的。

在 *vmin 單位的情況下，長度按 *vw 或 *vh 中較小者的比例計算。如果 UA 默認視口為 390px x 844px，那么指定的 10vmin 值就會變成 39 像素的使用值（或 390 的 10%）。

同樣，*vmax 單位也是按照 *vw 或 *vh 中較大者的比例計算的。對于 390px x 844px 的視口，10vmax 的指定值將轉化為 84.4 像素的使用值。

大、小和默認視口尺寸都是穩定值。只有當視口本身發生變化時，例如從縱向模式旋轉到橫向模式時，它們才會發生變化。如果使用 svw 或 svi 單位來確定元素的大小，那么當瀏覽器界面縮回時，元素的大小不會擴大。反之，如果使用 lvh 或 lvb 單位，部分內容可能會在瀏覽器控件展開時被隱藏。

另一方面，動態視口尺寸并不穩定。當方向改變或用戶滾動時，它們可能會改變。例如，當瀏覽器界面影響視口大小時，高度值為 100dvmax 的元素就會改變大小。

容器相對單位

視口相對單位適用于瀏覽器窗口的可用空間，而容器相對單位則是相對于元素的包含上下文的大小來計算的。容器相對單位目前是在 CSS Containment Module Level 3中定義的，而不是在CSS Values and Units Module Level 4規范中。

容器相對單位也稱為容器查詢長度單位。根據單位的不同，每個單位等于容器橫軸或縱軸尺寸的 1%。例如，cqw 和 cqh 單位分別等于容器寬度和高度的 1%。

要在布局中支持多種語言和腳本，請使用 cqi 和 cqb 單位。cqi 單位等于容器內嵌大小的 1%，而 cqb 單位等于塊大小的 1%。與 vi 和 vb 單位一樣，cqi 和 cqb 也受writing-mode屬性的影響。

最后是 cqmin 和 cqmax 單位。cqmin 單位與 vmin 類似，都是根據 cqi 或 cqb 中較小的一個進行評估。而 cqmax 單位則是根據 cqi 或 cqb 中的較大值來計算的。每個 cqmin 單位代表較小維度的 1%。每個 cqmax 單位代表較大維度的 1%。

總結

了解尺寸單位是創建能在各種媒體和設備尺寸下正常工作的 CSS 布局的關鍵。選擇正確的單位可以提高網站的可讀性、可用性和可訪問性。當你知道輸出媒介的物理尺寸時，請使用絕對單位。字體相對單位和視口相對單位非常適合創建適應多種屏幕尺寸的布局。容器相對單位非常適合創建可重復使用的組件，以適應各種布局。

以上就是本文的全部內容，如果對你有所幫助，歡迎點贊、收藏、轉發~

總結

以上是生活随笔為你收集整理的CSS 尺寸单位概述的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。