響應式設計基礎入門教程 2026 | 零基礎小白學移動端適配

響應式設計基礎入門教程

手機、平板、電腦、甚至手錶都在上網——同一個網頁怎麼在不同尺寸的屏幕上都好看？答案就是「響應式設計」。這篇教程用大白話帶你從零掌握讓網頁自適應所有設備的核心技巧。

一、響應式設計是什麼？

1.1 通俗理解

想象你有一張照片，相框有大有小。響應式設計就像一張「會自動伸縮的畫」：

在大屏電腦上：內容展開，多列布局
在平板上：內容稍微收攏，變成兩列
在手機上：內容堆疊成一列，字號、按鈕都適合手指點擊

一句話總結

響應式設計 = 同一套 HTML/CSS，能根據屏幕寬度自動調整佈局和樣式。

1.2 為什麼必須學？

流量來自四面八方：2026 年超過 60% 的網頁流量來自移動設備
搜索引擎偏愛：Google 優先收錄「移動友好」的網站
維護成本低：一套代碼搞定所有設備，不用單獨做手機版
用戶體驗好：無論用什麼設備訪問，都能舒適閱讀

1.3 與「自適應」的區別

概念	做法	特點
響應式（Responsive）	一套代碼，根據寬度流暢變化	流暢、維護簡單
自適應（Adaptive）	針對不同設備做幾套固定佈局	精確、但維護麻煩

現在主流做法是響應式為主，自適應斷點為輔。

二、第一步：設置視口（Viewport）

2.1 不加視口會怎樣？

如果不告訴瀏覽器「這是給手機看的頁面」，手機會默認按 980px 寬度渲染整個網頁，然後縮小到手機屏幕裡——結果字小得看不清，得不停捏合放大。

2.2 正確做法

在每個 HTML 頁面的 <head> 里加上這一行：

html

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

逐個參數解釋：

width=device-width：把視口寬度設為設備的真實寬度
initial-scale=1.0：初始縮放比例為 1（不縮放）

別漏掉

沒有這行 meta，後面所有響應式 CSS 都會失效！這是響應式設計的「開關」。

2.3 常用擴展參數

html

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, viewport-fit=cover">

maximum-scale=5.0：允許用戶最多放大到 5 倍（不要設為 1，會剝奪無障礙體驗）
viewport-fit=cover：適配劉海屏、圓角屏（iPhone X 及以後）

三、媒體查詢（Media Queries）：核心武器

3.1 媒體查詢是什麼？

媒體查詢就像一個「條件判斷」：當屏幕寬度滿足某個條件時，才執行這段 CSS。

css

/* 默認樣式（手機優先） */
body {
  font-size: 16px;
}

/* 當屏幕寬度 >= 768px 時（平板及更大） */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

/* 當屏幕寬度 >= 1024px 時（電腦） */
@media (min-width: 1024px) {
  body {
    font-size: 20px;
  }
}

3.2 語法結構

css

@media 媒體類型 and (媒體特性) {
  /* 滿足條件時生效的 CSS */
}

常用媒體類型：

all：所有設備（默認，可省略）
screen：屏幕設備
print：打印時

常用媒體特性：

特性	含義	示例
`width`	視口寬度	`(width: 768px)`
`min-width`	最小寬度（≥）	`(min-width: 768px)`
`max-width`	最大寬度（≤）	`(max-width: 767px)`
`orientation`	屏幕方向	`(orientation: landscape)`
`prefers-color-scheme`	系統深淺色	`(prefers-color-scheme: dark)`

3.3 實戰：根據寬度改變佈局

css

/* 容器默認佔滿全寬（手機） */
.container {
  width: 100%;
  padding: 0 16px;
}

/* 平板：限制最大寬度並居中 */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px;
  }
}

/* 電腦：更寬 */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

3.4 深淺色模式適配

css

:root {
  --bg: #ffffff;
  --text: #333333;
}

/* 當用戶系統開啟了深色模式 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --text: #e0e0e0;
  }
}

body {
  background: var(--bg);
  color: var(--text);
}

用 CSS 變量配合

用 CSS 變量存顏色，深淺色切換隻需改 :root 裡的變量值，不用每個元素都重寫。

四、斷點怎麼選？

4.1 什麼是斷點？

斷點就是「佈局發生明顯變化的寬度臨界點」。比如 768px 是手機和平板的分界線。

4.2 主流斷點方案（參考 Tailwind CSS）

斷點名稱	寬度	對應設備
`sm`	≥ 640px	大手機橫屏
`md`	≥ 768px	平板豎屏
`lg`	≥ 1024px	平板橫屏 / 小筆記本
`xl`	≥ 1280px	桌面顯示器
`2xl`	≥ 1536px	大屏顯示器

4.3 選擇斷點的原則

重要原則

按內容選斷點，而不是按設備選斷點。 設備千千萬，但你的佈局「在哪裡開始擠」是固定的。

正確做法：

先在瀏覽器裡把窗口從寬拉到窄
觀察佈局在哪裡「開始變形/擠在一起」
在那個寬度設置斷點

4.4 不要設太多斷點

一般 3-4 個斷點足夠。斷點太多會讓 CSS 難維護。

五、移動優先 vs 桌面優先

5.1 兩種思路

策略	默認寫誰	媒體查詢方向	適合場景
移動優先	手機樣式	`min-width`（變大時疊加）	現代主流推薦
桌面優先	電腦樣式	`max-width`（變小時覆蓋）	老項目改造

5.2 移動優先示例（推薦）

css

/* 默認：手機樣式（基礎） */
.nav {
  display: flex;
  flex-direction: column;  /* 豎向堆疊 */
}

/* 平板及以上：橫向排列 */
@media (min-width: 768px) {
  .nav {
    flex-direction: row;
  }
}

5.3 為什麼推薦移動優先？

手機性能弱、網絡慢，先保證最簡樣式
手機樣式通常更簡單，作為「基礎」更合理
代碼從簡單到複雜，邏輯更清晰
避免手機加載一堆桌面樣式又被覆蓋（浪費性能）

記憶口訣

從小到大，逐步增強：先寫手機，再用 min-width 往上加。

六、響應式圖片

6.1 問題：圖片太大拖慢手機

一張 4000px 寬的 banner，在手機上只顯示 375px，卻要下載完整大圖——浪費流量和時間。

6.2 方案一：max-width 限制

最簡單的方法，讓圖片不超過容器寬度：

css

img {
  max-width: 100%;   /* 不超過容器寬度 */
  height: auto;       /* 高度自動等比縮放 */
  display: block;
}

別忘了 height: auto

如果只設 max-width: 100% 不設 height: auto，圖片可能變形。

6.3 方案二：srcset 按設備加載不同圖

html

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

srcset：列出不同尺寸的圖和它們的真實寬度（用 w 標記）
sizes：告訴瀏覽器在不同寬度下，圖片顯示多大
瀏覽器自動挑最合適的圖下載

6.4 方案三：picture 標籤做藝術指導

html

<picture>
  <source media="(min-width: 1024px)" srcset="wide-banner.jpg">
  <source media="(min-width: 768px)" srcset="tablet-banner.jpg">
  <img src="mobile-banner.jpg" alt="橫幅">
</picture>

不同設備直接用不同的圖（比如手機用裁剪過的豎圖，電腦用寬圖）。

七、響應式字體

7.1 別用固定 px

css

/* ❌ 不好：固定大小，不靈活 */
h1 {
  font-size: 48px;
}

在手機上 48px 太大，在 4K 屏上又太小。

7.2 用 clamp() 自動縮放（推薦）

css

h1 {
  /* 最小 24px，理想 5vw，最大 48px */
  font-size: clamp(24px, 5vw, 48px);
}

clamp(最小值, 理想值, 最大值)：字號在最小和最大之間，按視口寬度（vw）流暢變化。

7.3 常用響應式字號

css

:root {
  --text-sm: clamp(0.875rem, 0.8rem + 0.2vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
  --text-lg: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  --text-xl: clamp(1.5rem, 1.1rem + 1.5vw, 2.5rem);
}

body { font-size: var(--text-base); }
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }

八、響應式佈局實戰

8.1 卡片網格：從一列到多列

html

<div class="cards">
  <div class="card">卡片 1</div>
  <div class="card">卡片 2</div>
  <div class="card">卡片 3</div>
  <div class="card">卡片 4</div>
</div>

css

.cards {
  display: grid;
  /* 默認手機：一列 */
  grid-template-columns: 1fr;
  gap: 16px;
}

/* 平板：兩列 */
@media (min-width: 640px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 電腦：四列 */
@media (min-width: 1024px) {
  .cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

8.2 更優雅：auto-fit 自動填充

css

.cards {
  display: grid;
  /* 每列最少 250px，自動決定幾列 */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

這一行就能實現：屏幕寬就多列，窄就少列，不用寫媒體查詢！

auto-fit 的魔法

minmax(250px, 1fr) 表示每列「最小 250px，最大平分剩餘空間」。屏幕變寬時自動加列，變窄時自動減列。

8.3 響應式導航：手機漢堡菜單

html

<nav class="navbar">
  <div class="logo">我的網站</div>
  <button class="menu-toggle" aria-label="菜單">☰</button>
  <ul class="menu">
    <li><a href="#">首頁</a></li>
    <li><a href="#">文章</a></li>
    <li><a href="#">關於</a></li>
  </ul>
</nav>

css

/* 手機：菜單默認隱藏 */
.menu {
  display: none;
  flex-direction: column;
  width: 100%;
}

.menu.open {
  display: flex;
}

.menu-toggle {
  display: block;
}

/* 桌面：菜單橫向顯示，隱藏漢堡按鈕 */
@media (min-width: 768px) {
  .menu {
    display: flex;
    flex-direction: row;
    width: auto;
  }
  
  .menu-toggle {
    display: none;
  }
}

javascript

// 點擊漢堡按鈕切換菜單
const toggle = document.querySelector('.menu-toggle')
const menu = document.querySelector('.menu')

toggle.addEventListener('click', () => {
  menu.classList.toggle('open')
})

九、常用單位選擇

9.1 單位對比

單位	含義	適合場景
`px`	像素（固定）	邊框、細線
`%`	相對父元素	寬度、佈局
`rem`	相對根字號	字號、間距（推薦）
`em`	相對父字號	組件內部
`vw`/`vh`	視口寬/高的 1%	全屏佈局
`vmin`/`vmax`	視口較小/較大邊的 1%	居中彈窗

9.2 推薦做法

css

:root {
  font-size: 16px;  /* 根字號 */
}

/* 字號、間距用 rem（用戶改瀏覽器字號能跟著變） */
body {
  font-size: 1rem;
  padding: 1.5rem;
}

/* 佈局寬度用 % 或 fr */
.container {
  width: 90%;
  max-width: 1200px;
}

/* 邊框用 px */
.card {
  border: 1px solid #ddd;
  border-radius: 8px;
}

十、實戰練習：做一個響應式個人主頁

把前面學的全部用上：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的主頁</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    
    :root {
      --primary: #3b82f6;
      --bg: #ffffff;
      --text: #1f2937;
    }
    
    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #111827;
        --text: #f3f4f6;
      }
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
    }
    
    .container {
      width: 100%;
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 1rem;
    }
    
    header {
      padding: 1.5rem 0;
      text-align: center;
    }
    
    h1 {
      font-size: clamp(1.75rem, 5vw, 3rem);
      color: var(--primary);
    }
    
    .intro {
      font-size: clamp(1rem, 2vw, 1.25rem);
      margin-top: 0.5rem;
    }
    
    .cards {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      margin-top: 2rem;
    }
    
    @media (min-width: 640px) {
      .cards { grid-template-columns: repeat(2, 1fr); }
    }
    
    @media (min-width: 1024px) {
      .cards { grid-template-columns: repeat(3, 1fr); }
    }
    
    .card {
      background: var(--bg);
      border: 1px solid #e5e7eb;
      border-radius: 0.75rem;
      padding: 1.5rem;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    
    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    
    .card img {
      width: 100%;
      height: 180px;
      object-fit: cover;
      border-radius: 0.5rem;
      margin-bottom: 1rem;
    }
    
    footer {
      text-align: center;
      padding: 2rem 0;
      margin-top: 3rem;
      border-top: 1px solid #e5e7eb;
      font-size: 0.875rem;
      opacity: 0.7;
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <h1>你好，我是小明</h1>
      <p class="intro">一名前端開發者，熱愛分享技術</p>
    </header>
    
    <section class="cards">
      <article class="card">
        <img src="https://picsum.photos/seed/proj1/400/240" alt="項目1">
        <h3>項目一</h3>
        <p>用 Vue 3 做的待辦應用</p>
      </article>
      <article class="card">
        <img src="https://picsum.photos/seed/proj2/400/240" alt="項目2">
        <h3>項目二</h3>
        <p>用 React 做的天氣查詢</p>
      </article>
      <article class="card">
        <img src="https://picsum.photos/seed/proj3/400/240" alt="項目3">
        <h3>項目三</h3>
        <p>用 VitePress 搭的博客</p>
      </article>
    </section>
    
    <footer>© 2026 小明 | 用 ❤️ 製作</footer>
  </div>
</body>
</html>

練習任務

把上面的代碼存成 index.html，用瀏覽器打開
拖動瀏覽器窗口，觀察佈局變化
打開瀏覽器開發者工具（F12），點「設備模擬」按鈕，選擇不同手機型號預覽
試著修改斷點，看看效果有什麼不同
把卡片改成 4 列（在大屏時），需要改哪裡？

十一、響應式測試技巧

11.1 瀏覽器設備模擬

按 F12 打開開發者工具
點左上角「手機+平板」圖標（或按 Ctrl+Shift+M / Cmd+Shift+M）
頂部下拉選擇設備型號，或拖動邊緣自定義寬度

11.2 真機測試

模擬器看不出真實性能和觸摸體驗，最終一定要在真機上測試：

同一 WiFi 下，用手機訪問電腦的局域網 IP
例如電腦 IP 是 192.168.1.100，手機瀏覽器輸入 http://192.168.1.100:5173

11.3 常見測試設備寬度

設備	寬度	備註
iPhone SE	375px	最小常見手機
iPhone 14	390px	主流 iPhone
iPad	768px	平板豎屏
iPad Pro	1024px	平板橫屏
筆記本	1366px	常見筆記本
桌面	1920px	全高清顯示器

十二、常見坑與避坑指南

12.1 坑一：忘了加 viewport meta

症狀：手機上字特別小，整個頁面被縮小。

解決：檢查 <head> 裡有沒有那行 <meta name="viewport">。

12.2 坑二：用了固定寬度

css

/* ❌ 固定 1200px，手機上會橫向滾動 */
.container {
  width: 1200px;
}

/* ✅ 用 max-width + 百分比 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

12.3 坑三：按鈕太小點不到

手機上手指點擊區域建議至少 44×44 像素（Apple 建議）：

css

.button {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 24px;
}

12.4 坑四：文字溢出不換行

css

/* 長單詞/URL 不換行導致橫向滾動 */
.url {
  word-break: break-all;      /* 強制斷行 */
  overflow-wrap: break-word;   /* 兜底 */
}

12.5 坑五：圖片撐破容器

css

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

12.6 坑六：hover 在手機上無效

手機沒有 hover，hover 樣式在觸屏上可能「粘住」。用媒體查詢限制：

css

@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
  }
}

十三、響應式設計檢查清單

發佈前對照這個清單檢查一遍：

加了 <meta name="viewport">
沒有固定寬度的容器（都用 max-width + 百分比）
圖片都設了 max-width: 100%; height: auto
字號用了 rem 或 clamp
按鈕可點擊區域 ≥ 44px
在 375px、768px、1024px、1440px 四個寬度都測過
沒有橫向滾動條
適配了深淺色模式（可選但推薦）
在真機上測過觸摸交互

總結

響應式設計的核心就這幾件事：

加視口 meta：開啟響應式開關
用媒體查詢：根據寬度切換樣式
移動優先：先寫手機，再用 min-width 增強
彈性單位：用 %、rem、clamp、fr 代替固定 px
響應式圖片：max-width 或 srcset
多端測試：模擬器 + 真機

掌握了這些，你就能做出在任何設備上都好看的網頁了！下一步可以學習 CSS Flexbox 彈性佈局和 CSS Grid 網格佈局，它們是響應式佈局的兩大基石。

學習路線

HTML 基礎 → CSS 基礎 → 響應式設計（你在這裡） → Flexbox → Grid → 實戰項目

響應式設計基礎入門教程 2026 | 零基礎小白學移動端適配 ​

一、響應式設計是什麼？ ​

1.1 通俗理解 ​

1.2 為什麼必須學？ ​

1.3 與「自適應」的區別 ​

二、第一步：設置視口（Viewport） ​

2.1 不加視口會怎樣？ ​

2.2 正確做法 ​

2.3 常用擴展參數 ​

三、媒體查詢（Media Queries）：核心武器 ​

3.1 媒體查詢是什麼？ ​

3.2 語法結構 ​

3.3 實戰：根據寬度改變佈局 ​

3.4 深淺色模式適配 ​

四、斷點怎麼選？ ​

4.1 什麼是斷點？ ​

4.2 主流斷點方案（參考 Tailwind CSS） ​

4.3 選擇斷點的原則 ​

4.4 不要設太多斷點 ​

五、移動優先 vs 桌面優先 ​

5.1 兩種思路 ​

5.2 移動優先示例（推薦） ​

5.3 為什麼推薦移動優先？ ​

六、響應式圖片 ​

6.1 問題：圖片太大拖慢手機 ​

6.2 方案一：max-width 限制 ​

6.3 方案二：srcset 按設備加載不同圖 ​

6.4 方案三：picture 標籤做藝術指導 ​

七、響應式字體 ​

7.1 別用固定 px ​

7.2 用 clamp() 自動縮放（推薦） ​

7.3 常用響應式字號 ​

八、響應式佈局實戰 ​

8.1 卡片網格：從一列到多列 ​

8.2 更優雅：auto-fit 自動填充 ​

8.3 響應式導航：手機漢堡菜單 ​

九、常用單位選擇 ​

9.1 單位對比 ​

9.2 推薦做法 ​

十、實戰練習：做一個響應式個人主頁 ​

練習任務 ​

十一、響應式測試技巧 ​

11.1 瀏覽器設備模擬 ​

11.2 真機測試 ​

11.3 常見測試設備寬度 ​

十二、常見坑與避坑指南 ​

12.1 坑一：忘了加 viewport meta ​

12.2 坑二：用了固定寬度 ​

12.3 坑三：按鈕太小點不到 ​

12.4 坑四：文字溢出不換行 ​

12.5 坑五：圖片撐破容器 ​

12.6 坑六：hover 在手機上無效 ​

十三、響應式設計檢查清單 ​

總結 ​

響應式設計基礎入門教程 2026 | 零基礎小白學移動端適配

一、響應式設計是什麼？

1.1 通俗理解

1.2 為什麼必須學？

1.3 與「自適應」的區別

二、第一步：設置視口（Viewport）

2.1 不加視口會怎樣？

2.2 正確做法

2.3 常用擴展參數

三、媒體查詢（Media Queries）：核心武器

3.1 媒體查詢是什麼？

3.2 語法結構

3.3 實戰：根據寬度改變佈局

3.4 深淺色模式適配

四、斷點怎麼選？

4.1 什麼是斷點？

4.2 主流斷點方案（參考 Tailwind CSS）

4.3 選擇斷點的原則

4.4 不要設太多斷點

五、移動優先 vs 桌面優先

5.1 兩種思路

5.2 移動優先示例（推薦）

5.3 為什麼推薦移動優先？

六、響應式圖片

6.1 問題：圖片太大拖慢手機

6.2 方案一：max-width 限制

6.3 方案二：srcset 按設備加載不同圖

6.4 方案三：picture 標籤做藝術指導

七、響應式字體

7.1 別用固定 px

7.2 用 clamp() 自動縮放（推薦）

7.3 常用響應式字號

八、響應式佈局實戰

8.1 卡片網格：從一列到多列

8.2 更優雅：auto-fit 自動填充

8.3 響應式導航：手機漢堡菜單

九、常用單位選擇

9.1 單位對比

9.2 推薦做法

十、實戰練習：做一個響應式個人主頁

練習任務

十一、響應式測試技巧

11.1 瀏覽器設備模擬

11.2 真機測試

11.3 常見測試設備寬度

十二、常見坑與避坑指南

12.1 坑一：忘了加 viewport meta

12.2 坑二：用了固定寬度

12.3 坑三：按鈕太小點不到

12.4 坑四：文字溢出不換行

12.5 坑五：圖片撐破容器

12.6 坑六：hover 在手機上無效

十三、響應式設計檢查清單

總結