% 百分比

  • 如果用於指定字體大小，則相對於其父元素的字體大小進行測量。
  • 如果用於指定長度，則相對於其父元素的寬度進行測量。
/* 父元素 */
.parent {
  font-size: 16px;
  width: 300px;
}

/* 子元素 */
.child {
  font-size: 100%; /* 字體大小相對於父元素的字體大小, 16px */
  width: 50%; /* 寬度相對於父元素的寬度, 150px */
  padding: 1em; /* 內部填充相對於當前的字體大小 16px */
}

em (相對 EM)

  • 如果用於指定字體大小，則相對於其父元素的字體大小進行測量。
  • 如果用於指定長度，則相對於當前的字體大小進行測量。 🔥

用 EM 指定長度，需注意是用當前字體大小當基準。若當前沒指定，用繼承來的字體大小當基準。

/* 父元素 */
.parent {
  font-size: 16px;
  width: 300px;
}

/* 子元素 */
.child {
  font-size: 2em; /* 字體大小相對於父元素的字體大小 32px */
  width: 3em; /* 寬度相對於相對於[當前]的字體 32px x 3 = 96 px 🔥 */
}

rem (Root EM)

  • REM (Root EM) 是相對於文檔的 Root element (html 元素) 的字體大小進行測量。
  • REM 提供了一種統一的基準，使得在整個文檔中可以輕鬆地維護一致的尺寸比例。
/* 設定根元素字體大小 */
html {
  font-size: 16px;
}

/* 父元素 */
.parent {
  font-size: 1rem; /* 字體大小相對於根元素 16px */
  width: 300px;
}

/* 子元素 */
.child {
  font-size: 2rem; /* 字體大小相對於根元素 32px */
  width: 3rem; /* 寬度相對於根元素 48px */
}

vw 與 vh (Viewport Width & Height)

  • vw 表示相對於視窗寬度的百分比。
  • vh 表示相對於視窗高度的百分比。
/* 父元素 */
.parent {
  font-size: 16px;
  width: 50vw; /* 寬度相對於視窗寬度的50% */
}

/* 子元素 */
.child {
  font-size: 2em; /* 字體大小相對於父元素的字體大小 32px */
  width: 50vh; /* 寬度相對於視窗高度的50% */
}