響應式網頁設計怎麼做？RWD 教學帶你掌握三大設定與手機版型實作

響應式網頁設計怎麼做？先掌握三個核心設定

響應式網頁設計（Responsive Web Design，簡稱 RWD）是讓同一個網頁隨螢幕可用寬度調整版面的方法。實作重點是：設定 viewport、使用彈性版型，再透過 CSS 媒體查詢調整排列方式，讓手機、平板與電腦都能順暢閱讀與操作。

響應式設計不是把桌機畫面等比例縮小，而是重新安排內容。例如，電腦版的三欄服務介紹，在手機上改成單欄；導覽列可以換行或收合，圖片則隨容器縮放，不超出畫面。

RWD 的調整依據通常是瀏覽器視窗寬度，而不是辨識手機品牌或型號。因此，桌機縮小視窗時，也可能呈現與手機相似的排列。

RWD 網頁設計教學：從 HTML 到 CSS 完成基本版型

初學者可以先製作「標題、導覽列、三張內容卡片」的小型頁面，再加入圖片與互動功能。以下範例不需要安裝框架，建立兩個檔案即可練習。

第一步：設定手機網頁尺寸設定的關鍵 viewport

在 index.html 中加入以下內容，並將 style.css 放在相同資料夾：

<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>網站設計服務</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <header class="container">
    <h1>網站設計服務</h1>

    <nav aria-label="主要導覽">
      <a href="#services">服務項目</a>
      <a href="#contact">聯絡我們</a>
    </nav>
  </header>

  <main class="container">

    <section id="services" aria-labelledby="services-title">
      <h2 id="services-title">服務項目</h2>

      <div class="cards">
        <article class="card">
          <h3>品牌網站</h3>
          <p>清楚呈現品牌特色與服務資訊。</p>
        </article>

        <article class="card">
          <h3>購物網站</h3>
          <p>規劃商品介紹與購物操作流程。</p>
        </article>

        <article class="card">
          <h3>活動頁面</h3>
          <p>集中呈現活動內容與報名資訊。</p>
        </article>
      </div>
    </section>

    <section id="contact">
      <h2>聯絡我們</h2>
      <p>歡迎來信討論網站需求。</p>
    </section>

  </main>

</body>
</html>

width=device-width 會讓版面視窗寬度對應裝置的 CSS 像素寬度；initial-scale=1 則設定初始縮放比例。手機網頁尺寸設定不應直接填入某款手機的硬體解析度，也不需要禁止使用者放大畫面。

第二步：使用彈性寬度與 Grid 排版

將以下內容存入 style.css：

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #222;
}

.container {
  width: calc(100% - 2rem);
  max-width: 72rem;
  margin-inline: auto;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

nav a {
  display: inline-block;
  padding: 0.75rem;
}

.cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.card {
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid #ddd;
  border-radius: 0.5rem;
  overflow-wrap: anywhere;
}

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

section {
  margin-block: 2rem;
}

@media (min-width: 48rem) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

這個版型預設採單欄，空間足夠時變成兩欄、三欄。容器以彈性寬度搭配最大寬度，既保留手機左右留白，也避免大螢幕上的文字行長過長。

minmax(0, 1fr) 可讓欄位在有限空間內縮小；overflow-wrap 則協助處理長網址等不易斷行的內容。

第三步：正確理解 @media 的判斷條件

@media (min-width: 540px) 代表視窗寬度大於或等於 540 CSS 像素時，套用其中的規則；max-width: 540px 則是小於或等於 540 CSS 像素。

斷點不是特定裝置的固定分類。以上範例的 48rem、64rem 是示範值，應依內容需要調整。當卡片文字變得擁擠、導覽列不好操作時，就是檢查斷點的時機。

若同時使用 min-width 與 max-width，還要留意邊界重疊及 CSS 覆寫順序。初學階段採用由小到大的 min-width 寫法，通常較容易維護。

RWD 設計原則：手機網頁設計不只是縮放畫面

手機優先，先安排最重要的內容

手機優先（Mobile First）是先完成小螢幕版面，再逐步擴充大螢幕配置。優先保留服務說明、價格資訊、聯絡方式與主要操作，不要讓大型裝飾區塊把關鍵內容推得太遠。

與設計、行銷或內容人員合作時，也應先確認資訊優先順序，再決定斷點，避免只依桌機設計稿縮排，卻忽略手機上的實際閱讀流程。

文字保持可讀，互動不只依賴滑鼠

內文字級可先以 1rem 為起點，配合適當行高，再以實機檢查。標題可使用 clamp() 設定最小值、流動值與最大值，避免尺寸變化過大。

按鈕需要足夠的點擊範圍與間距。重要功能不應只有滑鼠移入才出現，也要能透過觸控、鍵盤操作。若製作收合式導覽，應使用按鈕切換，並同步更新 aria-expanded 狀態。

圖片能縮放，也要控制下載量

max-width: 100% 可以避免圖片超出容器，卻不會自動縮小下載檔案。需要提升圖片載入效率時，可使用 srcset 與 sizes，讓瀏覽器依版面及像素密度選擇圖片來源。

HTML 圖片也宜提供正確的 width、height，協助瀏覽器預留比例空間。首屏主要圖片通常不宜延遲載入；較下方圖片則可視情況使用 loading="lazy"。

表格與表單要另外設計

資料表格不適合一律縮小字體。可以在外層容器設定 overflow-x: auto，讓表格局部橫向捲動，同時維持整頁正常閱讀。

表單應保留清楚的欄位標籤，並依資料類型使用 email、tel 等輸入型態。錯誤訊息要放在容易辨識的位置，避免使用者送出後還得來回尋找。

RWD 響應式網頁設計與自適應式設計有何不同？

響應式設計通常以流動寬度、彈性圖片及媒體查詢，讓版面隨可用空間連續調整；自適應式設計（Adaptive Web Design）則通常準備多組預設版面，再依條件選用。

兩者都在處理不同裝置的瀏覽需求，實務上也可能混合使用。一般形象網站、內容網站或服務頁面，可以先從 RWD 著手；若不同裝置需要明顯不同的操作流程，再評估是否增加專屬版型。

RWD 不等於一定要使用框架，也不只等於加入 @media。 即使不寫大量斷點，透過 Grid、Flexbox 和彈性尺寸，也能讓許多區塊自然適應空間。

RWD 網頁模板下載：5 款模板與適用情境比較

模板適合用來觀察區塊配置與練習修改，但仍需替換內容、檢查圖片尺寸，並測試自己的文字長度。以下列出 Start Bootstrap 提供的五款模板，連結可查看各款預覽與下載資訊。

五款 RWD 模板功能與版型分析

下載前應查看模板當前版本的授權文件、相依套件與圖片使用條件。模板程式碼與示範照片不一定適用完全相同的授權範圍。

練習時，可以先修改導覽列、容器最大寬度和卡片欄數，再加入較長的中文標題。這比只替換顏色，更能理解模板的響應式結構。

RWD 網頁教學實作後，如何檢查版面與 SEO？

用連續縮放找出真正的版面問題

開啟瀏覽器開發者工具，從窄視窗逐步拉寬，觀察是否出現水平捲軸、文字截斷、卡片擠壓或按鈕重疊。除了預設裝置尺寸，也要測試斷點前後的寬度。

再以實體手機檢查觸控、橫向畫面及表單鍵盤。模擬器適合快速檢查版型，實機則能補足操作體驗上的差異。

上線前檢查清單

• 內容完整性：手機版保留主要文字、連結與必要資訊。
• 操作可及性：導覽、表單與彈出視窗可用鍵盤操作。
• 圖片穩定性：圖片比例正確，載入時不明顯推動內容。
• 閱讀彈性：放大文字後仍可閱讀，重要按鈕沒有被遮住。
• 瀏覽器相容性：在主要目標瀏覽器確認版型與功能。

RWD 是 SEO 基礎，不是排名保證

同一網址與同一份主要內容，有助於維護網站資訊的一致性，但採用 RWD 不代表搜尋排名會自動提升。

仍需處理頁面標題、語意化結構、內部連結、圖片替代文字及載入效能。手機版也不應為了簡潔而刪除重要說明，可以改用清楚的分段或可操作的收合區塊呈現。

結論：先做出彈性版型，再依內容調整斷點

響應式網頁設計的核心，是讓內容在不同空間下都容易閱讀與使用。從 viewport、彈性容器、Grid 排版與媒體查詢開始，就能建立可延伸的基礎。

完成後，再處理圖片、導覽、表單與跨裝置測試。無論自行撰寫或使用模板，都應以實際內容驗證版型，而不是只追求特定尺寸下的畫面整齊。

常見問題（FAQ）

1. 完全不會程式，可以製作響應式網站嗎？

可以使用支援 RWD 的網站編輯工具或現成模板。不過，了解 HTML 結構、CSS 盒模型與基本斷點設定，會更容易調整細節及排除跑版問題。

2. 一定要使用 Bootstrap 才能完成 RWD 嗎？

不需要。原生 CSS 的 Grid、Flexbox 與媒體查詢就能完成響應式版型。框架提供現成元件與排版規則，是否採用可依專案規模及維護需求決定。

3. 已經設定 viewport，手機版為什麼仍然超出畫面？

常見原因是元素使用固定寬度、圖片未限制尺寸，或長網址無法換行。可利用開發者工具找出超出視窗的元素，再調整寬度、換行或局部捲動設定。

4. 舊網站可以直接改成響應式網站嗎？

通常可以，但修改範圍取決於原有結構。若版型大量依賴固定寬度或絕對定位，可能需要重整 HTML 與 CSS；先盤點首頁、列表頁、內頁和表單，有助於規劃修改順序。

5. 應該先學 HTML、CSS，還是直接下載模板？

建議先理解 HTML 語意、CSS 選擇器、盒模型與 Flexbox 或 Grid，再拆解模板。如此才能判斷版型如何運作，修改內容時也較不容易影響其他頁面。