RWD 斷點 / RWD Breakpoint 常用螢幕尺寸與 Media Query 設定

製作 RWD 響應式網頁的首要第一步，就是確認專案要設定幾個 RWD 斷點（RWD Breakpoint）。斷點切得越細，畫面在不同裝置上的過渡越平滑，但相對應的 CSS 維護成本也會隨之增加。

如果是一般中小型網站，通常規劃 2 ～ 3 個核心斷點（區分桌機、平板、手機）就相當足夠；若是對品牌視覺與多欄排版高度要求的系統，則會細分到 4 ～ 5 個斷點。以下彙整市面上常見的裝置螢幕寬度、過去與現在的 RWD 實務差異，以及可直接複製的雙軌 CSS Media Query 寫法。

---

常見裝置螢幕寬度與 RWD 斷點（RWD Breakpoint）對照表

在規劃 RWD 斷點時，最重要的一個觀念是區分 「裝置本身的 CSS 視窗寬度（Viewport Width）」 與 「用來切換版面的斷點臨界值（Breakpoint）」。以下整理從 4K 螢幕到小型手機的完整落點及過去與現在的差異：

裝置類型	常見 CSS 視窗寬度	建議設定之 RWD 斷點	使用頻率與「過去 vs. 現在」實務差異
4K UHD 螢幕	原生 3840px (過去常誤記為電影規 4096px)	不需單獨設 3840px 斷點 (共用 >= 1400px 或 1920px)	稀少。現在 Windows 預設開啟 150%～200% 縮放、Mac 為 Retina 2x，4K 螢幕在瀏覽器內的 CSS 邏輯寬度實際為 1920px 或 2560px，極少觸發 3840px。
2K QHD 螢幕	原生 2560px (過去常記為 2048px)	>= 1400px（或 1536px）	稀少。外接繪圖螢幕或高階桌機常見，實務上透過 .container 限制最大寬度（如 max-width: 1320px）即可置中適配。
PC 桌上型螢幕	1920px（Full HD）	桌機基準寬度 （或 >= 1200px / 1400px）	主流。最標準的桌機設計稿滿版寬度，通常作為桌機版預設樣式基準。
筆電（15~16 吋 / Mac）	1440px ～ 1536px	<= 1400px（或 >= 1200px）	主流。MacBook 與商務筆電常見邏輯寬度。
筆電（13~14 吋）	1280px ～ 1366px	<= 1200px	主流。傳統文書筆電常見寬度，多欄卡片常在此處縮減間距。
平板（橫向 / iPad Pro）	1024px	992px 或 1024px	主流關鍵斷點。桌機多欄切換為平板排版的分水嶺。
平板（直向）/ 手機橫向	768px	768px	主流關鍵斷點。雙欄切換為單欄、桌機導覽列切換為「漢堡選單」的最核心斷點。
大螢幕手機 / 摺疊機	576px ～ 640px	576px（或 640px）	主流關鍵斷點。區分「一般直向手機」與「橫向手機 / 小平板」的分界線。
現代大尺寸手機	390px ～ 440px (過去僅標註 420px)	勿設為斷點上限！ (應涵蓋於 < 576px 區間內)	現在最主流。iPhone 14/15/16 Pro（393px）、Pro Max（430px~440px）與主流 Android（390px~412px）皆落在此區間。
標準智慧型手機	375px	勿寫 max-width: 375px！ (僅作 UI 設計稿基準寬度)	過去主流（iPhone 6/7/8/X/SE3）。⚠️ 若把斷點寫成 max-width: 375px，會導致 390px~440px 的現代新手機全部吃不到手機版樣式！
小型手機（mini / 舊機）	320px ～ 360px	<= 360px（僅用於極窄螢幕微調字級）	防破版下限。過去 iPhone 5/SE1 為 320px，現在僅作為測試「最小不破版寬度」的底線。

---

過去 vs. 現在：RWD 斷點設計的 4 大演進差異

許多工程師沿用幾年前的舊習慣寫 RWD，常會遇到「在新 iPhone 上版面跑掉」或「跟現代框架衝突」的問題。以下整理過去早期做法與現在業界主流做法的 4 個關鍵差異：

1. 手機斷點數值的演進（過去常寫 375px / 420px ➔ 現在統一以 < 576px 或 < 768px 涵蓋所有手機）：
   • 過去：早期 iPhone 螢幕只有 320px（iPhone 5）與 375px（iPhone 6/7/8），許多人會直接寫 @media (max-width: 375px) 或 420px 當作手機版斷點。
   • 現在：現代主流手機（如 iPhone 15/16 Pro Max 430px~440px、Pixel / Galaxy 412px）的 CSS 寬度早已超過 375px 甚至 420px。現在業界絕對不會拿 375px 當 Media Query 斷點，而是以 375px 作為 Figma 設計稿畫布寬度，CSS 斷點則統一設在 576px（或 768px）以下，才能一次涵蓋 320px ～ 440px 的所有手機。
2. 撰寫方向的演進（過去 Desktop-First max-width ➔ 現在 Mobile-First min-width 雙軌並行）：
   • 過去：早期網站以桌機流量為主，習慣先寫 PC 滿版樣式，再用 max-width 由大到小往下縮（Desktop-First）。
   • 現在：隨著手機流量突破 60% 以及 Google 全面採用 行動優先索引（Mobile-First Indexing），現代主流框架（Bootstrap 5、Tailwind CSS）已全面改用 Mobile-First（預設寫手機版，再用 min-width 由小到大往上疊加）。
3. 臨界點 1px 重疊問題的語法演進（過去 -1px / .98px ➔ 現在支援 < 與 >= 範圍語法）：
   • 過去：若同時使用 min-width: 768px 與 max-width: 768px，在剛好 768px（iPad 直向）時兩邊會同時觸發打架，因此過去必須手動減去 1px（寫成 max-width: 767px 或 Bootstrap 的 767.98px）。
   • 現在：現代瀏覽器（Chrome、Edge、Safari、Firefox）已全面支援 CSS Media Queries Level 4 範圍語法，可直接寫 @media (width < 768px) 與 @media (width >= 768px)，語意直覺且永遠不會在臨界點重疊。
4. 務必確認 HTML <meta name="viewport">（新手最常漏掉的前提）：
   無論你的 @media 斷點寫得多完美，若 HTML 的 <head> 缺少以下標籤，手機瀏覽器就會強行以 980px 的虛擬桌面寬度渲染網頁，導致所有手機斷點失效：

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

---

專案最常用的 RWD 斷點 CSS 範本（寫法 A / 寫法 B）

若專案沒有引入外部 CSS 框架，需要手寫 Media Query 時，可依專案性質從以下 寫法 A（現在主流 Mobile-First） 或 寫法 B（傳統直覺 Desktop-First） 擇一複製使用。

⚠️ CSS 覆蓋順序鐵律：同權重的 CSS 規則「寫在後面的會覆蓋前面的」。因此：

• 採用 寫法 A（min-width） 時，斷點數字必須 由小排到大（576px ➔ 768px ➔ 1024px）。
• 採用 寫法 B（max-width） 時，斷點數字必須 由大排到小（1024px ➔ 768px ➔ 576px）。順序寫反會導致樣式被覆蓋失效！

寫法 A：現在主流 — 行動優先 Mobile-First（使用 min-width，由小寫到大）

適合新建立的前端專案、重視 SEO 的內容型網站，以及習慣 Bootstrap / Tailwind 邏輯的團隊：

/* 預設基礎樣式：手機直向（0px ~ 575px 皆適用，單欄排版） */
.container {
  width: 100%;
  padding: 0 12px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* 1. 大手機與手機橫向（大於等於 576px：增加左右內距） */
@media (min-width: 576px) {
  .container {
    padding: 0 20px;
  }
}

/* 2. 平板直向（大於等於 768px：單欄改為 2 欄） */
@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* 3. 筆電與桌機（大於等於 1024px：2 欄改為 3 欄，並限制最大寬度） */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

寫法 B：傳統直覺 — 桌面優先 Desktop-First（使用 max-width，由大寫到小）

適合以 PC 操作為主的企業後台（Admin Dashboard）、B2B 系統，或是設計稿只有給一張 1920px 桌機圖、需要往下縮排的既有專案：

/* 預設基礎樣式：PC 桌機版（1024px 以上，預設 3 欄排版） */
.container {
  max-width: 1200px;
  padding: 0 24px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* 1. 平板橫向與小型筆電（小於 1024px：3 欄改為 2 欄） */
@media (max-width: 1023.98px) {
  /* 現代瀏覽器亦可直接寫：@media (width < 1024px) */
  .container {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 20px;
  }
}

/* 2. 平板直向與大手機（小於 768px：2 欄改為單欄） */
@media (max-width: 767.98px) {
  /* 現代瀏覽器亦可直接寫：@media (width < 768px) */
  .container {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* 3. 一般直向手機（小於 576px：縮小左右內距，涵蓋 320px~440px 所有新舊手機） */
@media (max-width: 575.98px) {
  /* 現代瀏覽器亦可直接寫：@media (width < 576px) */
  .container {
    padding: 0 12px;
  }
}

---

主流 CSS 框架預設 RWD 斷點比較（Bootstrap 5 vs. Tailwind CSS）

如果團隊已導入 Bootstrap 5 或 Tailwind CSS，兩者皆採用 寫法 A（Mobile-First min-width），強烈建議直接沿用框架內建的 RWD Breakpoint，避免自訂斷點與框架 Class 互相打架：

斷點代號	Bootstrap 5 預設斷點	Tailwind CSS 預設斷點	對應目標裝置區間
預設（無前綴 / xs）	< 576px	< 640px	直向手機（預設基礎樣式）
sm	>= 576px	>= 640px	手機橫向 / 大尺寸手機
md	>= 768px	>= 768px	平板直向（iPad 標準寬度）
lg	>= 992px	>= 1024px	平板橫向 / 13 吋筆電
xl	>= 1200px	>= 1280px	主流筆電與標準桌機
xxl / 2xl	>= 1400px	>= 1536px	Full HD / 2K / 4K 大螢幕桌機

---

延伸閱讀與相關教學

• RWD 基礎觀念與整體規劃：初學者想從頭認識響應式網頁架構，可先閱讀 RWD 新手教學- 從入門到實務一篇搞定。
• CSS 權重與樣式覆蓋順序：在切換斷點時若發現樣式沒有覆蓋成功，除了檢查 @media 排列順序外，也請檢查選擇器優先權，詳見 CSS 權重與優先順序：!important、ID 與 Class 選擇器比較。

---

參考資料

• MDN Web Docs: Using media queries
• W3C CSS Media Queries Level 4 Specification (Range Context)
• Bootstrap 5 Official Docs: Breakpoints
• Tailwind CSS Official Docs: Responsive Design