Unit Mutlak lwn Relatif dalam 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>

在此範例中：

• Saiz fon mutlak (24px) akan sentiasa kekal sama.
• Saiz fon relatif (1.5rem) akan dilaraskan berdasarkan saiz fon akar (16px), menghasilkan 24px.

---

Kesimpulan:

• Gunakan unit mutlak apabila konsistensi merentas peranti diperlukan, tetapi ambil perhatian bahawa ia tidak responsif.
• Gunakan unit relatif untuk reka bentuk yang lebih fleksibel dan responsif, terutamanya apabila membangun untuk berbilang saiz skrin dan peranti.

Atas ialah kandungan terperinci Unit Mutlak lwn Relatif dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!