響應式設計

現在超過一半的網頁流量來自手機。如果你的網頁只在電腦上好看、手機上卻亂掉，就會流失大量使用者。

響應式設計（Responsive Design）就是讓同一個網頁在不同裝置（手機、平板、電腦）上都能正常顯示。

viewport — 告訴手機「我有準備好」

每個響應式網頁的 <head> 裡都需要這一行：

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

沒有這一行，手機會把你的網頁「縮小」塞進螢幕，字會變得超小。加了這一行，手機才會用正確的寬度來顯示。

Media Query — 根據螢幕大小切換樣式

Media Query 讓你針對不同螢幕寬度套用不同的 CSS：

/* 預設樣式（適用所有裝置） */
.container {
  padding: 16px;
}

/* 螢幕寬度 <= 768px 時（平板以下） */
@media (max-width: 768px) {
  .container {
    padding: 8px;
  }
}

/* 螢幕寬度 <= 480px 時（手機） */
@media (max-width: 480px) {
  .container {
    padding: 4px;
  }
}

常見斷點

名稱	寬度範圍	說明
手機	<= 480px	iPhone SE 等
平板	481px ~ 768px	iPad mini 等
小筆電	769px ~ 1024px	一般筆電
桌機	> 1024px	外接螢幕

實戰：三欄變一欄

這是最經典的響應式技巧——電腦上三欄並排，手機上變成一欄堆疊：

關鍵技巧：flex-wrap: wrap + min-width 讓元素在空間不夠時自動換行。

響應式文字大小

手機螢幕小，字不能跟電腦一樣大：

響應式圖片

圖片要加 max-width: 100% 防止它超出容器：

實用響應式模板

把前面學的全部組合起來，做一個簡單但完整的響應式頁面：

AI 協作：學了這個，跟 AI 怎麼配合？

響應式設計讓同一個頁面在手機和電腦上都好看——AI 很會寫 media query，但斷點你來定。

你的人類優勢：

你知道你的用戶主要用手機還是電腦（看 GA 資料）
你能實際測試不同螢幕尺寸的效果

可以這樣跟 AI 說：

這個商品列表在桌機上要 3 欄、平板 2 欄、手機 1 欄。幫我用 CSS media query 處理。

練習題

互動示範

DEMO 1可以修改程式碼試玩

DEMO 2可以修改程式碼試玩

DEMO 3可以修改程式碼試玩

DEMO 4可以修改程式碼試玩

DEMO 5可以修改程式碼試玩

挑戰任務

Task 1

做一個兩欄版面（左邊主內容、右邊側邊欄），在螢幕寬度 600px 以下時自動變成單欄（上下排列）。提示：用 flex-wrap: wrap 搭配 min-width

Task 2

做一個完整的響應式頁面：包含 header（網站名稱）、導覽列（3~4 個連結）、主內容區、footer。在手機尺寸下標題要變小、導覽列要能換行

Task 3

做一張響應式圖片：設定 max-width: 100% 和 height: auto，外面用 div 包住並限制最大寬度 400px

← BackTake the Exam →