CSS 變數與響應式設計

現代 CSS 不只是設定顏色和字體。CSS 變數讓主題切換變得簡單，Media Query 讓網頁適應不同螢幕。

CSS 變數 (Custom Properties) 主題切換

--primary

--bg

--text

--radius：8px

預覽卡片

這是一段範例文字，用來展示主題切換效果。

:root {
  --primary: #3b82f6;
  --bg: #ffffff;
  --text: #1a1a1a;
  --radius: 8px;
}

.card {
  background: var(--bg);
  color: var(--text);
}

.button {
  background: var(--primary);
  border-radius: var(--radius);
}

Media Query 斷點模擬

拖動滑桿模擬不同螢幕寬度，觀察佈局如何變化：

Card 1

Card 2

Card 3

/* 手機 */
@media (max-width: 640px) {
  .grid { flex-direction: column; }
}

/* 平板 */
@media (min-width: 641px) and (max-width: 1024px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* 桌面 */
@media (min-width: 1025px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

小結

- CSS 變數讓主題切換只需要改幾個值
- Media Query 讓網頁適應手機、平板、桌面各種螢幕
- 這些功能不需要 JavaScript 就能完成

下一課