name: 響應式設計技能
description: 斷點、行動優先、多裝置適配指南

📱 響應式設計 (RWD)

斷點系統

標準斷點

CSS 變數

:root {
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

Mobile First

/* 基礎樣式 = 手機 */
.container {
  padding: 1rem;
}

/* 平板以上 */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
}

/* 桌機以上 */
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
    margin: 0 auto;
  }
}

響應式網格

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

流體字型

:root {
  --text-h1: clamp(2rem, 5vw, 3.5rem);
  --text-h2: clamp(1.5rem, 4vw, 2.5rem);
  --text-body: clamp(1rem, 2vw, 1.125rem);
}

響應式圖片

<picture>
  <source media="(min-width: 1024px)" srcset="large.jpg">
  <source media="(min-width: 768px)" srcset="medium.jpg">
  <img src="small.jpg" alt="描述">
</picture>

img {
  max-width: 100%;
  height: auto;
}

觸控友善

/* 最小觸控目標 44x44px */
button, a {
  min-height: 44px;
  min-width: 44px;
}

/* 足夠的間距 */
.nav-item + .nav-item {
  margin-left: 1rem;
}

測試

1. Chrome DevTools：裝置模式
2. 實機測試：手機、平板
3. BrowserStack：多裝置測試
4. Lighthouse：效能檢測