此篇會將響應式斷點設計拆為以下三個部分來介紹。

• viewport
• 尋找容器
• 設置斷點

viewport

定義：網頁的可視區域，代表使用者能看到的網頁範圍
用途：決定網頁內容如何在不同裝置上呈現
常見問題：Window 與 Viewport 的差異

meta viewport

用來控制行動裝置可視範圍寬度尺寸和縮放行。

width=device-width：將頁面寬度設為裝置實際寬度

• 參數限制：
  • 預設值：980px
  • 最小值：200px
  • 最大值：10000px
• 合法值：
  • device-width
  • 正整數（像素值）

initial-scale=1.0：設定初始縮放比例

• 建議值：1.0（100%）
  • 確保網頁以 1:1 的比例呈現

Meta viewport 是 RWD 的基礎設置，透過 width=device-width 讓瀏覽器使用實際裝置寬度，確保 Media Queries 能正確觸發並呈現適當的 RWD 樣式。

沒有設置 viewport 的網頁

下方示範將 iPhone SE（375px）實際影響拆為三大面向來分析

• 視窗大小影響
• media queries 影響
• 內容呈現影響

對於視窗大小影響

• 實際情況
  • 裝置實際寬度為 375px
  • 瀏覽器強制使用 980px 預設寬度
• 問題
  • 造成實際與預期的視窗寬度不符
  • 影響整體排版計算基準

對於 media queries 影響

• 判斷機制異常
  • 以預設 980px 為判斷基準
  • 而非使用實際裝置寬度 375px

造成小於預設寬度的斷點不會被觸發，以下方斷點樣式為例 max-width: 767px 的樣式不會生效。

@media (max-width: 1200px) {
/* ✅ 會生效：因為 1200px 大於預設的 980px */
}

@media (max-width: 767px) {
/* ❌ 不會生效：因為 767px 小於預設的 980px */
}

對於內容呈現影響

• 縮放比例
  • 980px 內容被強制縮放至 375px
  • 造成等比例縮小效果
• 使用者體驗
  • 文字難以閱讀
  • 按鈕不易點擊
  • 解析度降低

檢查 viewport 是否正確設置方法

1. 開啟瀏覽器開發者工具
2. 檢視 HTML 中的 meta 標籤
3. 確認 width=device-width、initial-scale 設置是否正確
   

尋找容器

• 兩大面向
  • 尋找邊界
  • 容器對齊
• 三步驟執行
  • 邊界識別
  • 對齊位置確認
  • 最大寬度設定

尋找邊界

🎯 Step1：從設計稿中找區各個區塊的邊界

邊界分析重點

• 識別頁面主要容器寬度
• 標記重複出現的容器寬度

實際案例分析

下圖辨識出四個容器，並且有三個容器寬度是重複

• 紅框：頁頭導覽區容器寬度 (940px)
• 橙框：登入表單容器寬度 (780px)
  

對齊位置

🎯 Step2：確認相同容器對齊位置是否相同

❌ 固定值方式的限制

• 無法自適應螢幕尺寸
• 可能產生水平 x 軸
• 違反響應式設計原則

// 不建議的寫法
.container {
  width: 940px;
  margin: 0 42px; // 固定邊距值
}

✅ 建議的對齊方式
方法一：Margin Auto

// 設置方式：容器寬度 + 自動邊距
.container {
  width: 940px;
  margin: 0 auto;
}

方法二：flex 置中

// 設置方式：外層 flex + 水平置中對齊
.bg-banner {
  display: flex;
  justify-content: center;
}
.container {
  width: 940px;
}

設置最大寬度

🎯 Step3：確認相同容器最大寬度是否相同

容器彈性設計兩大原則

• width: 100%：確保手機版滿版顯示
• max-width：限制手機版以上版本的最大寬度

// 依據設計稿邊界區分容器類別
.container-940 {
  width: 100%;
  max-width: 940px;
}
.container-780 {
  width: 100%;
  max-width: 780px;
}

容器切齊檢查

• 相同類型容器是否對齊
• 最大寬度是否一致
• 響應式縮放是否正常

✍️ 小技巧：觀察相同容器區塊（如下圖中紅框標示），確認其邊界是否完全對齊且保持一致的最大寬度。

設置斷點

設置 CSS media query 斷點，為了讓網頁能隨著不同裝置尺寸自動改變排版佈局。

如何選擇斷點

• 設計稿優先：若有特定裝置的設計稿，應優先遵循設計稿的斷點設定
• 框架參考：無特定需求時，建議參考主流 CSS frameworks 斷點設計
• 公司規範：若公司有既定的斷點規範，應遵循團隊統一標準

bootstrap v5.3 斷點特性

• container 小於 breakpoint
• 容器兩側自動預留邊距
  • 邊距會隨斷點變化
  • 包含預設的 padding 值

tailwindcss v3.4.13 斷點特性

• container 等於 breakpoint
• 完全貼齊斷點寬度，需要手動搭配 utility classes 設置間距

Bootstrap vs. Tailwind 選擇建議

bootstrap → 適合兩側邊距可以為浮動數值間距，或內容排版寬度不固定的情況

• 內容寬度經常變動（如部落格、文章頁）
• 允許邊距隨螢幕寬度自動調整
• 不需要精確控制每個斷點的間距

Tailwind → 適合需要精確控制寬度的設計，符合設計稿原始規格

• 需要精確的格線系統（如商品展示）
• 設計稿要求精確的寬度和間距
• 需要高度客製化的響應式設計

斷點設置策略

響應式策略選擇

// 手機優先（Mobile First）
@media (min-width: 768px) { ... }

// 桌機優先（Desktop First）
@media (max-width: 992px) { ... }

響應式網頁兩種方向

• 手機優先：使用 min-width（由小到大）
• 桌機優先：使用 max-width（由大到小）

常見的 CSS frameworks，Bootstrap、Tailwind 等主流框架多採用手機優先，預設沒有斷點狀況是手機樣式。

設計稿分析

• 識別設計稿提供的版本
• 確定所需的最小斷點數量

以下圖為例，設計稿提供桌機版與手機版兩種版本，這代表我們至少需要設置兩個斷點來處理這些版型轉換。

桌機優先樣式設計

• CSS 特性
  • 程式碼由上到下執行
  • 後面樣式會覆蓋前面樣式
• 設置順序
  • 先寫桌機版樣式（預設樣式）
  • 再寫平板版樣式（第一個斷點）
  • 最後寫手機版樣式（第二個斷點）

桌機優先斷點建立

• 桌機版（> 992px）
  • 對應設計稿寬度 1024px
  • 使用預設樣式 無需設置 media query
• 平板版（992px ~ 576px）
  • 第一個斷點 max-width: 992px
  • 容器寬度可採用較窄的容器寬度 780px
• 手機版（< 576px）
  • 第二個斷點 max-width: 576px
  • 對應設計稿寬度 375px

// 桌機版預設樣式（> 992px）
.container-940 {
  width: 100%;
  max-width: 940px;
}
.container-780 {
  width: 100%;
  max-width: 780px;
}

// 平板版樣式（992px ~ 576px）
@media (max-width: 992px) {
  .container-940 {
    max-width: 780px;
  }
}

// 手機版樣式（< 576px）
@media (max-width: 576px) {
  /* 設置手機樣式，例如: 滿版背景 */
}

過度版型設置時機

版型差距問題

• 跨度過大
  • 桌機版到平板版落差明顯
  • 平板版到手機版過渡不順
• 容器寬度處理
  • 940px → 780px：寬度變化幅度大
  • 建議新增 540px 作為中間過渡值

// 過渡版型（768px ~ 576px）
@media (max-width: 768px) {
  .container-940 {
    max-width: 540px;
  }
}

複雜結構需求

• 文字排版調整
  • 不同寬度需要改變文字方向
  • 避免文字出現非預期換行
• 背景區塊轉換
  • 處理滿版到非滿版轉換
  • 確保背景內容完整呈現
• 排版方式變化
  • 水平排列轉垂直堆疊
  • 避免內容擠壓變形
• 圖文混排區塊
  • 確保圖文相對位置關係
  • 保持圖片比例與尺寸

響應式樣式從哪個版型開始

Q：該如何選擇桌機優先 max-width 還是手機優先 min-width？
A：可以將哪一種裝置類型的使用者比較多，作為判斷條件。

Q：要從哪一個版型樣式開始寫？
A：從元素最多的版型開始，從多的元素樣式開始寫，隨著響應式斷點來減少元素。