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 id="This-is-px-text">This is 24px text</h1>
<h1 id="This-is-rem-text-px-based-on-root-size">This is 1.5rem text (24px based on root size)</h1>

在此範例中：

• 絕對字體大小（24px）將始終保持不變。
• 相對字體大小（1.5rem）將根據根字體大小（16px）進行調整，結果為24px。

---

結論：

• 當需要跨裝置的一致性時使用絕對單位，但請注意它們不會回應。
• 使用相對單位進行更靈活和響應更靈敏的設計，特別是在針對多種螢幕尺寸和設備進行開發時。

以上是CSS 中的絕對單位與相對單位的詳細內容。更多資訊請關注PHP中文網其他相關文章！