你有沒有遇過這種情況：網頁在電腦上看起來很完美，但拿手機打開卻字太小、圖片爆版、排版全亂？
這就是沒有做 RWD（Responsive Web Design，響應式網頁設計） 的結果。

RWD 的目標很簡單：
讓同一個網站，在電腦、平板、手機上都能好看又好用

為什麼需要 RWD？

現代人上網用手機的比例比電腦還高，如果網站只有桌機版，就等於放棄一大半的使用者。
RWD 透過 彈性版面 + CSS 技巧，可以自動適應不同螢幕。

RWD 的核心技巧

1.相對單位 (%, em, rem)

在響應式設計裡，固定單位-像素 (px) 是最基本的單位，固定不會變。
若要在不同裝置上顯示往往不夠靈活，所以我們常用相對單位來寫RWD。

而相對單位可以隨著父層或螢幕大小改變，非常適合響應式設計

(1) 百分比 %

用來相對於父元素大小
例如寬度設成 width: 50%;，代表寬度等於父元素的一半。

.container {
  width: 80%;   /* 佔父元素 80% */
}

好處：不管螢幕大小如何，都會依比例縮放。

• width: 100%
元素會跟著父層的寬度縮放
例子：圖片設 width: 100% → 會剛好塞滿父層，不會溢出

• max-width: 100%
讓圖片或區塊「最大」不要超過父層
常用來避免圖片爆版

(2) em

相對於父元素的字體大小 (font-size)
如果父元素字體是 16px，那麼 1em = 16px，2em = 32px。

p {
  font-size: 1.2em; /* 比父元素大 1.2 倍 */
}

⚠️ 注意：em 會層層累積，如果巢狀很多層，計算起來可能不直觀。

(3) rem (root em)

相對於根元素 < html > 的字體大小
比較穩定，不受父層影響
一般瀏覽器 < html > 預設字體大小是 16px，所以 1rem = 16px。

h1 {
  font-size: 2rem; /* 永遠是 32px，跟父元素大小無關 */
}

💡 小技巧：常常會在專案開頭設置

html {
  font-size: 16px; /* 方便用 rem 做比例換算 */
}

（4) vh / vw

• vh → Viewport Height = 螢幕可視區域的高度
• vw → Viewport Width = 螢幕可視區域的寬度

• 1vh = 螢幕高度的 1%
• 1vw = 螢幕寬度的 1%

換句話說：

◦ 100vh → 佔滿整個螢幕的高度，常用在全螢幕 banner
◦ 50vh → 佔螢幕高度的一半
◦ 100vw → 佔滿整個螢幕的寬度
◦ 10vw → 佔螢幕寬度的十分之一

vh / vw 就是相對於螢幕的高度、寬度
常用在全螢幕區塊、文字縮放、保持比例設計
以下有三個簡單範例～

例子1：全螢幕 Banner

.banner {
  height: 100vh; /* 高度跟螢幕一樣高 */
  width: 100vw;  /* 寬度跟螢幕一樣寬 */
  background: url('banner.jpg') no-repeat center/cover;
}

不管電腦還是手機，這個 .banner 區塊都會自動填滿整個螢幕。

例子2：文字大小跟螢幕寬度有關

.title {
  font-size: 5vw;
}

如果螢幕寬度是 1000px，那字體大小就是 50px。
如果螢幕寬度縮到 400px，字體大小就會變 20px。

（這樣字會隨著裝置大小縮放，但要注意太小或太大時要搭配 min()、max() 限制。

例子3：視覺上「保持比例」的方塊

.square {
  width: 50vw;
  height: 50vw; /* 高度用寬度算，會保持正方形 */
  background: lightblue;
}

這樣在不同螢幕上都會是正方形，且大小自動調整。

（5）可愛貼心css單位小總結

好的學習了這麼多單位，如果是前端網頁新手的你一定還是有點霧傻傻
不知道什麼時機用哪一種對不對～
非常貼心的作者在此為大家準備了整理好的表格方便對比

⚠️ 使用相對單位的小技巧

• 字體建議用 rem : 避免疊加問題，且容易統一調整。
• 圖片或區塊建議用 % : 讓內容跟著父層大小縮放。
• 滿版設計用 vh / vw : 像是首頁大圖、全螢幕區塊。

２.Media Queries (媒體查詢)

這是響應式設計的核心，可以根據不同螢幕大小，指定不同的 CSS。

常見寫法：

css

/* 手機 (小於 600px) */
@media (max-width: 600px) {
  body {
    background: lightblue;
  }
}

/* 平板 (601px 到 1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
  body {
    background: lightgreen;
  }
}

/* 桌機 (大於 1024px) */
@media (min-width: 1025px) {
  body {
    background: lightpink;
  }
}

這樣網頁在手機、平板、桌機打開時，就會自動切換不同顏色。

3.Viewport 設定

如果你只寫了 CSS，卻忘了加這段，手機打開網頁還是會縮到小小的。
所以必須在 < head > 裡加上這個 viewport meta：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width=device-width → 網頁寬度跟裝置螢幕一樣
• initial-scale=1.0 → 預設縮放比例是 100%

這樣瀏覽器才會知道要照螢幕大小來顯示，而不是把整個電腦版畫面硬塞進手機。

4.小範例：響應式卡片

html

<div class="card">
  <h2>我是標題</h2>
  <p>這是一段文字，會隨螢幕大小調整樣式。</p>
</div>

css

.card {
  width: 80%;
  max-width: 400px;
  margin: auto;
  padding: 1rem;
  background: #f0f0f0;
  font-size: 1rem; /* 預設 16px */
}

/* 手機版特別樣式 */
@media (max-width: 600px) {
  .card {
    background: #d0e8ff;
    font-size: 0.9rem; /* 縮小一點字體 */
  }
}

電腦打開是灰色背景，手機打開會變藍色背景，字也會自動縮小。

✅ 今日重點複習

• width: 100% → 塞滿父層
• max-width: 100% → 防止圖片爆版
• em → 相對父層字體大小（會累加）
• rem → 相對根元素字體大小（比較穩定）
• vh/vw → 相對螢幕高度/寬度
• Media Queries → 不同螢幕套不同 CSS
• Viewport → 手機正確顯示網頁的關鍵

好啦恭喜你們學習的 CSS 技能已經越來越多了
明天 (Day14) 就是學習 CSS 的最後一天啦
預計會教大家「動畫與過渡」來作為 CSS 系列週的結尾
就讓我們一起期待明天吧！
謝謝你的閱讀，我是Ting，明天一起繼續快樂學習 CSS 吧！