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

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

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

代碼示例：

.parent {
  font-size: 16px;
}

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

rem
rem（根元素字體尺寸單位）是相對于根元素（通常是HTML元素）字體尺寸的單位。與em不同，rem的基準是根元素的字體尺寸。如果根元素的字體尺寸為16px，1rem就等于16px。rem適合用于布局部分，可以方便地調整整個頁面的比例。

代碼示例：

html {
  font-size: 16px;
}

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

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

代碼示例：

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

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適合用于自適應尺寸。根據具體情況選擇合適的單位屬性可以使網頁在不同設備和屏幕上獲得更好的顯示效果。

#單位#尺寸