RWD (響應式網頁設計)

🎯 學習目標

• 了解 響應式網頁設計（RWD） 的概念
• 學會使用 @media 媒體查詢
• 學會 流動布局 (width: 100%, max-width, vh/vw)
• 學會 彈性圖片 (img { max-width: 100% })
• 學會 Flexbox 與 Grid 來適應不同螢幕大小
• 完成實作練習：響應式導覽列與卡片設計

🔹RWD 是什麼？

RWD（Responsive Web Design，響應式網頁設計） 是一種讓網頁可以 自動適應不同螢幕大小 的技術，適用於：

• 手機
• 平板
• 電腦
• 大型顯示器

📌 RWD 主要技術

1. 流動布局（Fluid Layouts） → 使用 width: 100% 讓內容填滿
2. 彈性圖片（Flexible Images） → max-width: 100% 避免圖片超出容器
3. 媒體查詢（Media Queries） → 針對不同裝置調整 CSS

🔹流動布局（Fluid Layout）

📌 使用 width: 100% 讓內容適應畫面大小

.container {
  width: 100%; /* 讓容器填滿螢幕 */
  max-width: 1200px; /* 限制最大寬度 */
  margin: auto; /* 讓內容置中 */
}

📌 彈性圖片

img {
  max-width: 100%; /* 圖片最大寬度不超過容器 */
  height: auto; /* 保持圖片比例 */
}

🔹媒體查詢（Media Queries）

媒體查詢（@media）可以根據 螢幕寬度 設定不同的 CSS。

📌 語法

@media (max-width: 768px) {
  .container {
    background: lightblue;
  }
}

📌 常見斷點

• @media (max-width: 1200px) → 大螢幕（筆電、桌機）
• @media (max-width: 992px) → 平板（iPad、較小的筆電）
• @media (max-width: 768px) → 手機（直式模式）
• @media (max-width: 480px) → 小手機（iPhone SE）

🔹RWD 響應式排版

🎨 響應式 Flexbox

📌 讓子元素在桌機版橫排，手機版改為直排

.flex-container {
  display: flex;
  gap: 10px;
}

@media (max-width: 768px) {
  .flex-container {
    flex-direction: column;
  }
}

<div class="flex-container">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>

🎨 響應式 Grid

📌 讓網格在桌機版顯示 3 欄，手機版變 1 欄

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr; /* 手機版變成 1 欄 */
  }
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

📝 RWD 實作練習

📝 練習 1：製作響應式導覽列

📌 目標

• 電腦版：選單橫排
• 手機版：選單改成直排
• 使用 @media 在 768px 以下改變排列方式

<style>
  .navbar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #333;
    padding: 10px;
  }
  .navbar a {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
  }

  @media (max-width: 768px) {
    .navbar {
      flex-direction: column;
      align-items: center;
    }
  }
</style>

<div class="navbar">
  <a href="#">首頁</a>
  <a href="#">關於我們</a>
  <a href="#">服務</a>
  <a href="#">聯絡</a>
</div>

📝 練習 2：製作 RWD 響應式卡片

📌 目標

• 電腦版：3 欄排列
• 平板：2 欄排列
• 手機版：1 欄排列

<style>
  .card-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .card {
    background: lightblue;
    padding: 20px;
    text-align: center;
  }

  @media (max-width: 992px) {
    .card-container {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 768px) {
    .card-container {
      grid-template-columns: 1fr;
    }
  }
</style>

<div class="card-container">
  <div class="card">卡片 1</div>
  <div class="card">卡片 2</div>
  <div class="card">卡片 3</div>
  <div class="card">卡片 4</div>
  <div class="card">卡片 5</div>
  <div class="card">卡片 6</div>
</div>

🎯 RWD 設計重點

✅ 流動布局（Fluid Layout） → width: 100% 讓內容適應不同螢幕
✅ 彈性圖片（Flexible Images） → max-width: 100% 確保圖片不超出
✅ 媒體查詢（Media Queries） → 使用 @media 針對不同裝置調整樣式
✅ Flexbox & Grid → 讓排版更彈性，適應不同螢幕

📚 學習資源

• MDN - Media Queries
• Responsive Web Design Basics