CSS 中的絕對單位與相對單位-css教學-PHP中文網

CSS 中的絕對單位與相對單位

Susan Sarandon

發布： 2024-09-26 18:09:02

原創

646 人瀏覽過

Absolute vs. Relative Units in CSS

在 CSS 中設定元素樣式時，您有兩類單位可供選擇：絕對單位 和 相對單位。以下是它們的詳細說明以及它們的區別：

1.絕對單位

絕對單位是固定測量單位。它們不受其他元素或螢幕尺寸的影響，這意味著無論使用它們的上下文如何，它們的尺寸都是恆定的。

常用絕對單位：

px（像素）：像素是螢幕上的一個小方塊。它是固定佈局最常用的單位。
- 範例：
```
h1 {
  font-size: 24px;
}
```
登入後複製
pt（點）：通常用於印刷媒體，1pt 等於 1/72 英吋。
cm（公分） 和 in（吋）：在網頁設計中很少使用，這些單位是基於實體尺寸。

絕對單位的優點：

一致性：無論設備或螢幕尺寸如何，尺寸始終相同。
可預測：非常適合建立固定佈局，您希望設計在所有平台上看起來完全相同。

缺點：

缺乏彈性：絕對單位無法很好地適應不同的螢幕尺寸或縮放設置，導致反應速度較差。

2.相對單位

相對單位靈活並根據它們使用的上下文進行縮放。它們的大小取決於其他元素，例如父容器、視窗或基本字體大小。

常用相對單位：

em：相對於其所使用的元素的字體大小。如果父元素的 font-size 為 16px，則 1em 等於 16px。如果父元素的大小發生變化，em 的大小也會改變。
- 範例：
```
p {
  font-size: 1.5em; /* 1.5 times the font size of the parent */
}
```
登入後複製
rem（根em）：相對於根元素（通常是元素）的字體大小。與 em 相比，這使其更具可預測性。

預設情況下，除非另有說明，瀏覽器通常會將根字體大小設為 16px。如果您為元素定義了自訂字體大小，則所有 rem 值都會根據該新大小進行計算。

範例：
```
p {
  font-size: 2rem; /* 2 times the root font size */
}
```
登入後複製
- %（百分比）：相對於父元素的大小。例如，width: 50% 使元素寬度為其父容器的 50%。
範例：
```
div {
  width: 75%; /* 75% of the parent's width */
}
```
登入後複製
- vw（視窗寬度） 和 vh（視口高度）：這些單位相對於瀏覽器的視口。 1vw 是視口寬度的 1%，1vh 是視口高度的 1%。

範例：

div {
  width: 50vw; /* 50% of the viewport's width */
}

登入後複製

相對單位的優點：

響應式設計：相對單位會根據螢幕尺寸、字體大小或容器尺寸自動縮放，讓您的設計更加靈活。
更易於維護：更改根元素的字體大小（使用 rem）可以縮放整個設計。

缺點：

可能更難控制：如果沒有很好地理解繼承以及大小如何通過元素級聯，相對單位有時會產生意想不到的結果。

何時使用絕對單位與相對單位

當您需要精確、固定的測量時，絕對單位（如 px）是最好的選擇。當您希望某些東西在任何地方都具有相同的尺寸（例如，小徽標或圖標）時，請使用這些。
相對單位（如 em、rem、vw 和 %）非常適合響應式設計。它們允許元素根據螢幕尺寸或父元素進行縮放和調整，使您的設計更加靈活。

範例：實務上的絕對單位與相對單位

<style>
  .absolute {
    font-size: 24px; /* Absolute unit */
  }

  .relative {
    font-size: 1.5rem; /* Relative unit */
  }

  /* Root font size: 16px */
  html {
    font-size: 16px;
  }
</style>

<h1 class="absolute">This is 24px text</h1>
<h1 class="relative">This is 1.5rem text (24px based on root size)</h1>

登入後複製

在此範例中：