CSS 單位屬性指南：em，rem，px 和 vw/vh

CSS 單位屬性指南：em，rem，px 和 vw/vh

在編寫CSS樣式時，選擇合適的單位屬性是非常重要的。本文將介紹幾種常用的單位屬性：em，rem，px 和 vw/vh，並提供具體的程式碼範例。

1. em
   em（字體尺寸單位）是相對於父元素字體尺寸的單位。如果父元素的字體尺寸為16px，1em就等於16px。當em用於其他屬性（如寬度、高度等）時，也是相對於父元素字體尺寸的比例值。

程式碼範例：

.parent {
  font-size: 16px;
}

.child {
  font-size: 1em; /* 等同于16px */
  width: 2em; /* 等同于32px */
  height: 3em; /* 等同于48px */
}

2. rem
   rem（根元素字體尺寸單位）是相對於根元素（通常是HTML元素）字體尺寸的單位。與em不同，rem的基準是根元素的字體尺寸。若根元素的字體尺寸為16px，1rem等於16px。 rem適合用於佈局部分，可以輕鬆調整整個頁面的比例。

程式碼範例：

html {
  font-size: 16px;
}

.child {
  font-size: 1rem; /* 等同于16px */
  width: 2rem; /* 等同于32px */
  height: 3rem; /* 等同于48px */
}

3. px
   px（像素單位）是最常見的單位，它具有固定的長度。 px適合用於需要精確控制尺寸的情況。

程式碼範例：

.child {
  font-size: 16px;
  width: 32px;
  height: 48px;
}

4. vw/vh
   vw（視窗寬度單位）和vh（視窗高度單位）是相對於視口寬度和視口高度的單位。視口指的是瀏覽器可見區域的寬度和高度。 vw表示視口寬度的百分比，vh表示視口高度的百分比。使用vw/vh單位可以根據瀏覽器視窗的大小來自動調整元素的尺寸。

程式碼範例：

.child {
  font-size: 5vw; /* 视口宽度的5% */
  width: 30vw; /* 视口宽度的30% */
  height: 40vh; /* 视口高度的40% */
}

總結：
選擇合適的單位屬性對於編寫靈活且適配不同螢幕的CSS樣式非常重要。 em和rem適合用於相對尺寸，px適合用於固定尺寸，vw/vh適合用於自適應尺寸。根據具體情況選擇合適的單位屬性可以使網頁在不同裝置和螢幕上獲得更好的顯示效果。

以上是關於CSS單位屬性的指南，希望對你有幫助。

以上是CSS 單位屬性指南：em，rem，px 和 vw/vh的詳細內容。更多資訊請關注PHP中文網其他相關文章！