如何選擇最好的 CSS 單元來創建更好的網站佈局

CSS 單元是創建站點佈局時要考慮的最基本方面之一。 這些單元將定義您的設計在各種設備上的交互方式。

但是當談到 CSS 單位時，有很多選項可供選擇，而且所有選項都不相同。 CSS 單元不僅限於字體，因此作為前端開發人員，您還應該了解這些單元如何影響佈局。

在本文中，我們將向您展示不同 CSS 單元的工作原理，以便您可以使用它們來創建更好的佈局和網站設計。

CSS 單元的類型

CSS 單元可以分為以下幾類：

• 絕對單位
• 字體相關單位
• 視口相對單位

絕對單位

有些單位取決於某些絕對值，不受任何屏幕大小或字體的影響。 這些單位顯示可能因不同的屏幕分辨率而異，因為它們取決於屏幕的 DPI（每英寸點數）。

這些單位是：

• px（像素）
• 以英寸來算）
• 厘米（厘米）
• mm（毫米）
• 電腦（皮卡）
• pt（點）

像素

像素是最常用和接受的單位。 它被認為是許多其他單位的測量基礎。 它提供了各種設備之間最一致的結果。

以下示例中的box元素的高度為 150px，寬度為 150px，並且在所有屏幕尺寸上都保持不變。

[CSS]
。盒子{
高度：150px；
寬度：150px；
}
[/CSS]

所有其他絕對單位，如 in（英寸）、cm（厘米）和 mm（毫米）都是真實世界的測量單位，真實世界的 CSS 用例很少。

然而，了解它們與像素的關係仍然很好，所以這是它們的比較方式：

• 1 英寸 = 96 像素
• 1 厘米 = 37.8 像素
• 1 毫米 = 3.78 像素

而 pc（picas）和 pt（點）與英寸直接相關。

• 1 英寸 = 72 磅
• 1 英寸 = 6 件

所有絕對單位之間的關係可以這樣證明：

雷姆

除了像素，所有其他絕對單位在屏幕 CSS 中幾乎沒有用例，但由於它們是真實世界的測量單位，它們可以有效地用於打印 CSS。 （如果你想知道像素，它們在打印 CSS 中也能正常工作！）

字體相關單位

有些單位取決於文檔的字體大小或字體系列或其父級元素。 這包括以下單位：

• 時間
• 雷姆
• 前任
• 通道

Em

Em是相對長度單位； 它取決於父元素或文檔的字體大小。 默認情況下，如果未定義font-size ，則1em等於16px 。

Em 從其直接父級的字體大小繼承大小。 因此，如果父元素具有font-size:18px ，那麼1em將被測量為其所有子元素的18px 。

這裡我們有一個 div .post和三個孩子， .post-item ，有一個標題和一些文本。

[HTML]
<div class=”post”>
<div class=”post-item”>
<h2>標題</h2>
Lorem Ipsum 只是印刷和排版行業的虛擬文本。 自 1500 年代以來，Lorem Ipsum 一直是行業標準的虛擬文本
</div>
<div class=”post-item”>
<h2>標題</h2>
Lorem Ipsum 只是印刷和排版行業的虛擬文本。 自 1500 年代以來，Lorem Ipsum 一直是行業標準的虛擬文本
</div>
<div class=”post-item”>
<h2>標題</h2>
Lorem Ipsum 只是印刷和排版行業的虛擬文本。 自 1500 年代以來，Lorem Ipsum 一直是行業標準的虛擬文本
</div>
</div>
[/html]

現在父.post有一個font-size:20px和子元素.post div有它自己的font-size:1.2em和padding:0.75em和margin:0.75em ，所以計算出的 padding 和 margin 將是 18px (20px *1.2em*0.75em）。

[CSS]
HTML{
字體大小：20px；
}

。郵政{
字體大小：20px；
}

.post div{
字體大小：1.2em；
}

.post-item{
背景：粉色；
填充：0.75em；
保證金：0.75em；
}

.post-item h2{
字體大小：1.5em；
保證金：0.5em 0；
}

.post-item p{
保證金：0；
字體大小：1em；
}
[/CSS]

如您所見，子元素從父元素繼承值。

使用 em 的好處是，如果您決定按比例更改每個元素的font-size 、 padding和margin ，那麼您只需更改父元素的字體大小，所有其他元素都會相應調整。

對於像 px 這樣的絕對單位，情況並非如此，您必須單獨調整每個元素。

但是，如果嵌套元素在 em 中也有自己的font-size ，那麼這種繼承性質可能有點難以管理。

與前面的演示一樣，如果您將標題和段落包裝在其中一個子項的另一個div中，您會看到奇怪的結果。

[HTML]
<div class=”post-item”>
<分區>
<h2>標題</h2>
Lorem Ipsum 只是印刷和排版行業的虛擬文本。 自 1500 年代以來，Lorem Ipsum 一直是行業標準的虛擬文本
</div>
</div>
[/html]

因為post-item有一個嵌套的div ，基本大小將從 24px 變為 28.8px (20px*1.2em*1.2em)， h2的font-size和margin將變為 43.2px (20px*1.2em*1.2em) *1.5em) 和 14.4px (20px*1.2em*1.2em*0.5em)，分別。

雷姆

Rem 在這些類型的情況下非常有用，因為它們總是指代根元素的字體大小，而不是父元素。

如果您採用前面的示例並將.post div的單位從 em 更改為 rem，您將看到所有子元素自行修復。

[CSS]
.post div{
字體大小：1.2rem；
}
[/CSS]

一旦單位從 em 更改為 rem，它的基從父 div 更改為根元素，其具有front-size:20px 。

因此，計算將是 20px*1.2rem*value 並且h2和p都將具有一致的font-size和margin ，無論它們的父級如何。

前任

Ex 是相對於當前字體的 x 高度的，很少使用。 x 高度測量不一致； 有時它來自字體本身，有時瀏覽器自行計算。

與 em 和 rem 一樣，它取決於字體，但主要區別在於當您更改font-family時 ex 也會更改，而其他兩個則不是這樣。

[CSS]
。盒子{
寬度：150ex；
身高：150ex；
}
[/CSS]

通道

Ch 類似於 ex 但它不依賴於 x 高度； 而不是零 (0) 字符的寬度。 它也隨font-family改變。

[CSS]
。盒子{
寬度：150ch；
高度：150ch；
}
[/CSS]

視口相關單位

有幾個單位取決於視口的高度和寬度大小，例如：

• vh（視口高度）
• vw（視口寬度）
• vmin（最小視口）
• vmax（最大視口）

Vh

Vh（視口高度）測量為1vh ，等於視口高度的 1%。 該單元對於創建全高元素非常有用。 Vh 與百分比的反應類似，但不依賴於父元素的高度。

您可以在任何地方使用 vh，但 vh 最常見的用例是製作全高元素。 在此示例中， full-height類將創建一個藍色容器，該容器將是視口的 100% 高度。

[CSS]
.全高{
高度：100vh；
背景：藍色；
}
[/CSS]

大眾

Vw（視口寬度）與 vh 類似，但它考慮的是寬度，而不是視口的高度。 1vw 等於視口寬度的 1%。 如果您想基於排版創建響應式視口，這些單位會非常有用。

在本例中， h1的font-siz是視口寬度的 6%，因此如果視口寬度為 1000px，則字體大小將為 60px，如果視口為 500px，則字體大小將為 30px。

[CSS]
h1{
字體大小：6vw；
}
[/CSS]

最小值

Vmin 是根據視口的寬度或高度的最小值計算的，以較小者為準。 假設您的視口大小為 1000 像素高 x 800 像素寬。 1vmin將等於 8px。

最大電壓

Vmax 的計算與vmin完全相反，其中最大值被認為是視口。

與前面 1000px 高 x 800px 寬的視口示例一樣， 1vmax將等於 10px。

現在讓我們探討如何有效地使用vmin和vmax 。 使用我們之前的示例，假設我們現在想要基於視口大小而不是固定值來獲得流暢的填充和邊距。

在此代碼片段中，我將填充設置為3vmax並將邊距設置為1.5vmin 。

[CSS]
.post-item{
粉紅色背景；
填充：3vmax；
餘量：1.5vmin；
}
[/CSS]

填充和邊距將根據視口大小而變化。

百分比（%）單位

百分比（%）單位不屬於上述任何特定類別，但可以歸類為相對單位。 它是相對於其父元素的。

百分比主要與元素的高度和寬度相關，但可以在允許 CSS 長度單位的任何地方使用。

百分比是創建響應式或流暢佈局最有用的單位之一。 Bootstrap、foundation 和 Bulma 等流行框架使用百分比作為其基本佈局。

這裡的full-width類將是其父元素的 100% 寬度。

[CSS]
。全屏寬度{
寬度：100%；
}
[/CSS]

結論

我們已經涵蓋了幾乎所有可用的 CSS 單元。 根據您的目標，有些會比其他更適合。 作為一名前端開發人員，了解您的選擇總是好的，因為您永遠不知道在下一個項目中可能需要哪一個。

那麼，您最常使用哪些單位來獲得所需的結果？ 在下面的評論部分讓我們知道！