CSS 常見單位與通用關鍵字

CSS 單位分為絕對單位、相對單位、時間單位，以及適用於特定場景的其他單位。此外，CSS 還有一些通用關鍵字，可用於控制屬性值的行為。以下是詳細介紹，包含列印測量單位和時間單位的補充。

1. 絕對單位

絕對單位是固定值，不隨其他元素或環境變化，常用於印刷或固定尺寸場景。

px (像素, Pixel)
- 描述：像素是螢幕上最小的顯示單位，理論上固定，但高解析度螢幕（如 Retina）可能影響實際顯示。
- 用途：用於字體大小、邊框、元件尺寸等。
- 範例：
```
.box {
  width: 200px;
  height: 100px;
  font-size: 16px;
  border: 2px solid black;
}
```
cm (厘米, Centimeter) / mm (毫米, Millimeter) / in (英寸, Inch)
- 描述：物理測量單位，1in = 2.54cm = 25.4mm，適合列印樣式表。
- 用途：用於列印設計，確保輸出尺寸精準。
- 範例：
```
@media print {
  .print-box {
    width: 15cm;
    height: 10cm;
    margin: 5mm;
  }
}
```
pt (點, Point) / pc (派卡, Pica)
- 描述：1pt = 1/72 英寸，1pc = 12pt，常用於列印排版。
- 用途：適合設定列印文件的字體大小或間距。
- 範例：
```
@media print {
  .print-text {
    font-size: 12pt;
    line-height: 1.5pc;
  }
}
```
Q (四分之一毫米, Quarter-millimeter)
- 描述：1Q = 0.25mm，較少使用，但適用於高精度列印設計。
- 用途：用於需要極精細控制的列印場景。
- 範例：
```
@media print {
  .fine-line {
    border-width: 2Q;
  }
}
```

2. 相對單位

相對單位根據參考值（如父元素、視窗、字體大小）計算，適合響應式設計。

% (百分比, Percentage)

描述：相對於父元素的對應屬性值（如寬度、高度）。
用途：用於佈局或元件尺寸。

範例：

.container {
  width: 100%;
  height: 200px;
}
.child {
  width: 50%; /* 相對於父元素的寬度 */
  height: 50%; /* 相對於父元素的高度 */
}

vw (視窗寬度, Viewport Width) / vh (視窗高度, Viewport Height)
- 描述：1vw = 視窗寬度的 1%，1vh = 視窗高度的 1%。
- 用途：適合全螢幕元件或響應式設計。
- 範例：
```
.hero-section {
  width: 100vw;
  height: 50vh;
  background-color: #f0f0f0;
}
```
vmin / vmax
- 描述：vmin 取視窗寬高較小值的 1%，vmax 取較大值的 1%。
- 用途：確保元件在不同螢幕比例下適應。
- 範例：
```
.responsive-box {
  width: 20vmin;
  height: 20vmin;
}
```

rem (根元素字體大小, Root EM)

描述：相對於 <html> 元素的字體大小（預設 16px）。
用途：統一全站字體或間距，方便調整。

範例：

html {
  font-size: 16px;
}
.text {
  font-size: 1.5rem; /* 等於 24px */
  margin: 2rem; /* 等於 32px */
}

JavaScript 應用：動態調整根字體大小：

// 根據視窗寬度調整根字體大小
window.addEventListener("resize", () => {
  const fontSize = window.innerWidth < 768 ? 14 : 16;
  document.documentElement.style.fontSize = `${fontSize}px`;
});

em
- 描述：相對於當前元素或父元素的字體大小。
- 用途：適合元件內相對尺寸，但要注意巢狀計算。
- 範例：
```
.parent {
  font-size: 20px;
}
.child {
  font-size: 1.5em; /* 等於 30px */
}
```
ch
- 描述：基於字體「0」字符的寬度，1ch 約等於一個字符寬。
- 用途：控制文本框或對齊。
- 範例：
```
.input-text {
  width: 30ch; /* 約等於 30 個字符寬度 */
}
```
ex
- 描述：基於字體中小寫「x」的高度。
- 用途：用於精細垂直對齊。
- 範例：
```
.line {
  line-height: 2ex;
}
```

3. 時間單位

時間單位用於 CSS 動畫或過渡效果（transition、animation）。

s (秒, Second)
- 描述：以秒為單位的時間。
- 用途：設定動畫或過渡的持續時間。
- 範例：
```
.fade {
  transition: opacity 1s ease-in-out;
}
.fade:hover {
  opacity: 0.5;
}
```

ms (毫秒, Millisecond)

描述：1ms = 0.001 秒，適合短暫動畫。
用途：精細控制快速動畫。

範例：

.button {
  transition: background-color 300ms linear;
}
.button:hover {
  background-color: #007bff;
}

JavaScript 應用：動態控制動畫時間：

const button = document.querySelector(".button");
button.style.transitionDuration = "500ms"; // 動態設定過渡時間

4. 其他單位

fr (分數單位, Fraction)
- 描述：用於 CSS Grid，表示網格軌道的相對分數。
- 用途：靈活分配空間。
- 範例：
```
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 10px;
}
```

deg (度, Degree) / rad (弧度, Radian) / turn (圈, Turn)

描述：用於旋轉或角度屬性，1turn = 360deg，1rad ≈ 57.3deg。
用途：動畫或變形（transform）。

範例：

.spinner {
  transform: rotate(1turn);
  transition: transform 2s;
}

JavaScript 應用：動態旋轉：

const spinner = document.querySelector(".spinner");
let angle = 0;
setInterval(() => {
  angle += 90;
  spinner.style.transform = `rotate(${angle}deg)`;
}, 1000);

5. 通用關鍵字

這些關鍵字適用於大多數 CSS 屬性，用來控制值的行為。

inherit
- 描述：繼承父元素的對應屬性值。
- 用途：確保子元件使用父元件的樣式。
- 範例：
```
.child {
  color: inherit; /* 繼承父元素的顏色 */
}
```
initial
- 描述：將屬性恢復到瀏覽器的預設值。
- 用途：重置樣式，清除自訂設定。
- 範例：
```
.reset {
  display: initial; /* 恢復預設 display 值 */
}
```
unset
- 描述：若屬性預設為繼承，則繼承父元素值；否則恢復到初始值。
- 用途：靈活重置樣式。
- 範例：
```
.text {
  font-size: unset; /* 若父元素有字體大小則繼承，否則恢復預設 */
}
```
revert
- 描述：恢復到瀏覽器或使用者樣式表的預設值（較少使用，需支援檢查）。
- 範例：
```
.element {
  color: revert; /* 恢復到瀏覽器或使用者樣式表的顏色 */
}
```
auto
- 描述：讓瀏覽器自動計算屬性值。
- 用途：常用於 margin、width、height 等。
- 範例：
```
.container {
  margin: auto;
  width: auto;
}
```

6. 實用建議與 JavaScript 結合

響應式設計：優先使用 rem、vw、vh、% 等相對單位，搭配 JavaScript 動態調整：

// 動態調整元件寬度
const box = document.querySelector(".box");
window.addEventListener("resize", () => {
  box.style.width = window.innerWidth < 768 ? "90vw" : "50vw";
});

對應 CSS：

.box {
  width: 50vw;
  height: 200px;
  background-color: #e0e0e0;
}

列印樣式：使用 cm、mm、pt 等單位，並透過 @media print 優化列印效果：

@media print {
  .no-print {
    display: none;
  }
  .print-text {
    font-size: 12pt;
    margin: 1cm;
  }
}

動畫優化：使用 ms 進行快速動畫，s 進行較慢的過渡效果，並確保動畫平滑：
```
.smooth {
  transition: all 300ms ease;
}
.smooth:hover {
  transform: scale(1.1);
}
```
通用關鍵字應用：使用 inherit 或 initial 來簡化樣式管理，避免重複定義。

7. 常見問題與解答

px 與 rem/em 何時用？ px 適合固定尺寸（如邊框），rem 適合全站一致性，em 適合元件內相對調整。
時間單位如何選擇？ 快速動畫用 ms（如 200ms），緩慢效果用 s（如 1s）。
列印單位如何測試？ 使用瀏覽器的列印預覽（Ctrl+P）檢查 cm、pt 等效果。
通用關鍵字的優先級？ inherit 優先於父元素，initial 優先於瀏覽器預設，unset 結合兩者，revert 考慮使用者樣式表。

總結

絕對單位（px, cm, mm, in, pt, pc, Q）：適合固定尺寸或列印。
相對單位（%, vw, vh, vmin, vmax, rem, em, ch, ex）：適合響應式設計。
時間單位（s, ms）：用於動畫和過渡。
其他單位（fr, deg, rad, turn）：用於 Grid 或旋轉。
通用關鍵字（inherit, initial, unset, revert, auto）：控制樣式行為。

1. 絕對單位​

2. 相對單位​

3. 時間單位​

4. 其他單位​

5. 通用關鍵字​

6. 實用建議與 JavaScript 結合​

7. 常見問題與解答​

總結​