跟著AI一起:從零打造一個互動式網站 Day25

html教學

wqq 2025-10-08 01:09:54 ‧ 64 瀏覽

分享至

一、核心觀念
(a) 行動優先（Mobile-first）

先寫小螢幕（手機）的基礎樣式 → 再用 @media (min-width: …) 往上加。
好處：較少覆寫、載入更快。

(b) 斷點（Breakpoints）

可依專案調整，常見參考值：

min-width: 576px（小平板）

min-width: 768px（平板）

min-width: 1024px（小筆電）

min-width: 1280px（桌機寬螢幕）

寬度用 % 或 fr（Grid），最大寬度配 max-width

字體用 rem 或 clamp()

圖片
max-width: 100%、height: auto

(d) 必加的 <meta>
<meta name="viewport" content="width=device-width, initial-scale=1">

二、三段式自適應範例（1→2→3 欄）
HTML（index.html）

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Day25 RWD 範例</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <h1 class="logo">My Responsive Site</h1>
    <nav class="nav">
      <a href="#">首頁</a>
      <a href="#">關於</a>
      <a href="#">作品</a>
      <a href="#">聯絡</a>
    </nav>
  </header>

  <main class="container">
    <article class="card">內容 A</article>
    <article class="card">內容 B</article>
    <article class="card">內容 C</article>
    <article class="card">內容 D</article>
    <article class="card">內容 E</article>
    <article class="card">內容 F</article>
  </main>

  <footer class="site-footer">© 2025 My Site</footer>
</body>
</html>

CSS（style.css）
:root{
  --space: 16px;
  --radius: 12px;
}

/* 1) 基礎樣式：手機 */
html { font-size: 16px; }
body {
  font-family: "Noto Sans TC", system-ui, -apple-system, Arial, sans-serif;
  margin: 0;
  color: #222;
  background: #f7fafc;
}

.site-header, .site-footer {
  padding: var(--space);
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
}
.site-footer { border-top: 1px solid #e6e6e6; border-bottom: none; }

.logo { margin: 0 0 8px 0; font-size: clamp(1.25rem, 2vw, 1.75rem); }

.nav {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.nav a {
  text-decoration: none;
  color: #333;
  padding: 6px 10px;
  border-radius: 8px;
}
.nav a:hover { background: #eef2ff; }

.container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space);
  padding: var(--space);
  max-width: 1200px;
  margin: 0 auto;
}

.card {
  background: #fff;
  padding: calc(var(--space) * 1.25);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  min-height: 120px;
}

/* 2) 平板：>=768px → 2 欄 */
@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
  .nav { gap: 16px; }
}

/* 3) 桌機：>=1024px → 3 欄 */
@media (min-width: 1024px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 24px;
  }
  .site-header, .site-footer {
    padding: 20px 24px;
  }
  .logo { font-size: clamp(1.5rem, 1.5vw, 2rem); }
}

/* 額外：深色模式 */
@media (prefers-color-scheme: dark) {
  body { background: #0b1220; color: #e8ecf1; }
  .site-header, .site-footer, .card { background: #111827; border-color: #1f2937; }
  .nav a { color: #e8ecf1; }
  .nav a:hover { background: #1f2937; }
}

三、為什麼這樣寫（重點解釋）

Grid 容易做 1→2→3 欄：grid-template-columns: repeat(n, 1fr)。

行動優先：先寫 1 欄，再用 @media (min-width) 擴充。

字體用 clamp()：clamp(最小, 理想, 最大)，避免太大或太小。

深色模式：用 prefers-color-scheme: dark，尊重使用者系統設定。

四、圖片與文字也要響應式
圖片自適應

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

文字縮放

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

五、把 RWD 套到 Day22 / Day24
(a) Day22「天氣查詢」

.weather-app {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
@media (min-width: 768px) {
  .weather-app { padding: 24px; }
  .form-row { gap: 12px; }
}

(b) Day24「待辦清單」

.todo {
  max-width: 560px;
  margin: 0 auto;
  padding: 16px;
}
.todo ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding-left: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .todo ul { grid-template-columns: 1fr 1fr; }
}
.todo li {
  background: #fff;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

六、快速模板：三斷點

/* Base：手機 */
body { margin: 0; }

/* >= 768px：平板 */
@media (min-width: 768px) {
  /* 平板樣式 */
}

/* >= 1024px：桌機 */
@media (min-width: 1024px) {
  /* 桌機樣式 */
}

七、常見地雷 & 小訣竅

忘記加 <meta name="viewport"> → 手機版面會縮小。

用 px 寫死高度 → 內容一多爆版；應用 min-height 或自適應。

圖片沒限制寬度 → 撐爆版面；必須 max-width: 100%。

斷點太多 → 維護困難；先 2～3 個即可。

桌機優先 → 需要大量覆寫；建議改用行動優先。