了解如何在CSS中使用單位

在CSS中，您每天都會使用單位。它們用於設定長度、填充、邊距、對齊元素等。

像是 px、em、rem 或百分比之類的單位。

它們無所不在。也有一些相對較不熟悉的單位。

Pixels（像素）

最常用的測量單位。一個像素並不實際對應到屏幕上的物理像素，因為這會因設備而變化（考慮高DPI設備與非Retina設備）。

有一個慣例可以使這個單位在設備之間保持一致。

Percentages（百分比）

另一個非常有用的度量單位，百分比允許您以父元素相應屬性的百分比值指定數值。

例子：

.parent {
    width: 400px;
}

.child {
    width: 50%; /* = 200px */
}

現實世界的測量單位

我們還有那些從現實世界翻譯而來的測量單位。在屏幕上通常無用，但在打印樣式表中可能很有用。它們是：

  • cm 厘米（相當於37.8像素）
  • mm 毫米（0.1cm）
  • q 厘米的四分之一
  • in 英寸（相當於96像素）
  • pt 點（1英寸=72點）
  • pc 派卡（1派卡=12點）

相對單位

  • em 是分配給該元素的 font-size 的值，因此其精確值會在不同元素之間變化。它不會隨著使用的字體而改變，只會隨著字體大小改變。在印刷術中，它測量的是字母 m 的寬度。
  • rem 與 em 類似，但不是根據當前元素的字體大小變化，而是使用根元素（html）的字體大小。您只需要設置一次該字體大小，rem 將成為整個頁面上的一個一致的單位。
  • ex 類似於 em，但測量的不是 m 的寬度，而是 x 的高度。它可以根據使用的字體和字體大小而改變。
  • ch 類似於 ex，只是它測量的是 0（零）的寬度，而不是 x 的高度。

Viewport 單位

  • vw viewport 寬度單位 表示視口寬度的百分比。50vw 表示視口寬度的50%。
  • vh viewport 高度單位 表示視口高度的百分比。50vh 表示視口高度的50%。
  • vmin viewport 最小單位 表示高度或寬度中較小者的百分比。30vmin 是當前寬度或高度的30％，取決於哪個小。
  • vmax viewport 最大單位 表示高度或寬度中較大者的百分比。30vmax 是當前寬度或高度的30％，取決於哪個大。

分數單位

fr 是分數單位，用於將空間分為分數，主要在 CSS Grid 中使用。