CSS 響應式設計 (Responsive Web Design)

響應式網頁設計 (RWD) 讓網頁能夠適應不同螢幕大小和裝置，提供最佳的瀏覽體驗。

核心概念

響應式設計的三大支柱：

  1. 流動式格線 (Fluid Grids)：使用相對單位（%、fr）而非固定像素
  2. 彈性圖片 (Flexible Images)：圖片能自動縮放
  3. 媒體查詢 (Media Queries)：根據裝置特性套用不同樣式

Viewport 設定

在 HTML 的 <head> 中加入 viewport meta 標籤：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • width=device-width：寬度等於裝置寬度
  • initial-scale=1.0：初始縮放比例為 1

行動優先 (Mobile First)

建議採用行動優先的設計方式：先設計手機版，再用 min-width 媒體查詢擴展到更大螢幕。

/* 基礎樣式（手機） */
.container {
  width: 100%;
  padding: 16px;
}

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

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

行動優先的好處

  • 從最小螢幕開始，確保核心內容優先
  • 漸進增強，不會載入不必要的樣式
  • 更好的效能表現

響應式佈局

使用相對單位

/* 避免固定寬度 */
.container {
  width: 90%;
  max-width: 1200px;
}

/* 使用 fr 單位 */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Flexbox 響應式

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.flex-item {
  flex: 1 1 300px;    /* 最小 300px，可伸縮 */
}

Grid 響應式

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

響應式圖片

基本設定

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

背景圖片

.hero {
  background-image: url('hero-mobile.jpg');
  background-size: cover;
}

@media (min-width: 768px) {
  .hero {
    background-image: url('hero-desktop.jpg');
  }
}

HTML picture 元素

<picture>
  <source media="(min-width: 1024px)" srcset="large.jpg">
  <source media="(min-width: 768px)" srcset="medium.jpg">
  <img src="small.jpg" alt="響應式圖片">
</picture>

srcset 和 sizes

<img src="small.jpg"
     srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
     sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 600px"
     alt="響應式圖片">

響應式字體

使用 rem

html {
  font-size: 16px;
}

@media (min-width: 768px) {
  html {
    font-size: 18px;
  }
}

h1 {
  font-size: 2rem;    /* 會隨著根字體大小變化 */
}

使用 clamp()

h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
  /* 最小 1.5rem，理想 4vw，最大 3rem */
}

p {
  font-size: clamp(1rem, 2vw, 1.25rem);
}

響應式間距

.section {
  padding: clamp(20px, 5vw, 80px);
}

.card {
  margin-bottom: clamp(16px, 4vw, 32px);
}

響應式導航

手機漢堡選單

/* 導航樣式 */
.nav-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
}

.nav-menu.active {
  display: flex;
}

.hamburger {
  display: block;
}

/* 桌機顯示完整導航 */
@media (min-width: 768px) {
  .nav-menu {
    display: flex;
    flex-direction: row;
    position: static;
  }
  
  .hamburger {
    display: none;
  }
}

隱藏元素

根據螢幕大小顯示或隱藏元素：

/* 只在手機顯示 */
.mobile-only {
  display: block;
}

@media (min-width: 768px) {
  .mobile-only {
    display: none;
  }
}

/* 只在桌機顯示 */
.desktop-only {
  display: none;
}

@media (min-width: 768px) {
  .desktop-only {
    display: block;
  }
}

常用斷點

/* 小手機 */
@media (min-width: 320px) { }

/* 一般手機 */
@media (min-width: 480px) { }

/* 平板 */
@media (min-width: 768px) { }

/* 小桌機 / 大平板 */
@media (min-width: 1024px) { }

/* 桌機 */
@media (min-width: 1200px) { }

/* 大螢幕 */
@media (min-width: 1400px) { }

測試響應式設計

  1. 瀏覽器開發者工具：Chrome/Firefox 的裝置模擬器
  2. 實際裝置測試：在真實手機和平板上測試
  3. 調整瀏覽器視窗大小：觀察斷點切換是否順暢

響應式設計清單

  • 加入 viewport meta 標籤
  • 使用相對單位（%、rem、vw、vh）
  • 圖片設定 max-width: 100%
  • 測試各種螢幕大小
  • 確認文字在小螢幕上可讀
  • 確認按鈕和連結在觸控裝置上易於點擊
  • 測試橫向和直向方向