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

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

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

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

CSS 單元的類型

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

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

絕對單位

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

這些單位是：

• 像素（像素）
• 以英寸來算）
• 厘米（厘米）
• 毫米（毫米）
• 個人電腦（派卡斯）
• pt（點）

像素

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

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

.box{
height:150px;
width:150px;
}

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

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

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

而 pc (picas) 和 pt (points) 與英寸直接相關。

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

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

雷姆

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

字體相對單位

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

• 時間
• 雷姆
• 前任
• ch

恩

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

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

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

<div class="post">
<div class="post-item">
<h2>Title</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
  </div>
<div class="post-item">
<h2>Title</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
  </div>
<div class="post-item">
<h2>Title</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
  </div>
</div>

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

html{
font-size:20px;
}

.post{
font-size:20px;
}

.post div{
font-size:1.2em;
}

.post-item{
background:pink;
padding:0.75em;
margin:0.75em;
}

.post-item h2{
font-size:1.5em;
margin:0.5em 0;
}

.post-item p{
margin:0;
font-size: 1em;
}

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

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

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

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

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

<div class="post-item">
<div>
<h2>Title</h2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
  	</div>
</div>

因為post-item有一個嵌套的div ，base size 會從 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，您將看到所有子元素都自行修復。

.post div{
  font-size:1.2rem;
}

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

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

前任

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

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

.box{
width:150ex;
height:150ex;
}

通道

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

.box{
width:150ch;
height:150ch;
}

視口相對單位

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

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

Vh

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

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

.full-height{
height:100vh;
background:blue;
}

大眾

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

在這個例子中， h1的font-siz是視口寬度的 6%，所以如果視口寬度為 1000px，則字體大小為 60px，如果視口為 500px，則字體大小為 30px。

h1{
font-size:6vw;
}

最小

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

Vmax

Vmax 的計算與vmin正好相反，其中最大值被視為視口。

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

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

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

.post-item{
background pink;
padding:3vmax;
margin:1.5vmin;
}

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

百分比（%）單位

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

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

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

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

.full-width{
width: 100%;
}

結論

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

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