RWD

RWD（Responsive Web Design）企業級教學手冊 版本：v1.0（2026 年 2 月） 適用對象：資深前端工程師、全端工程師、UI/UX 設計師、技術主管 技術標準：HTML5 · CSS3（2024+）· JavaScript ES2025 · Vue 3.5+ · React 19+ · Angular 19+ · Tailwind CSS 4.x · Bootstrap 5.3+ 目錄 第 1 章 RWD 核心概念 1.1 為什麼需要 RWD？ 1.2 RWD vs Adaptive Design 差異 1.3 Mobile First 設計哲學 1.4 UX 與效能考量 1.5 SEO 對 RWD 的影響 第 2 章 RWD 技術基礎 2.1 Viewport 設定 2.2 Flexible Layout 2.3 CSS Media Queries 2.4 Flexbox 詳解 2.5 CSS Grid 詳解 第 3 章 現代 RWD 架構設計（企業級） 3.1 Layout 分層設計 3.2 Header / Sidebar / Content 響應式設計 3.3 Dashboard 響應式實務 3.4 表單 RWD 設計策略 3.5 表格（Data Table）在手機的處理方式 3.6 Modal / Drawer 在不同裝置設計 第 4 章 與現代框架整合 4.1 Vue 3 + RWD 4.2 Tailwind CSS 響應式設計 4.3 Bootstrap 5 Grid System 4.4 React 19 + RWD 整合 4.5 CSS 新特性整合（2025+） 4.6 Angular 19 + RWD 整合 第 5 章 圖片與媒體最佳化 5.1 Responsive Image（srcset / sizes） 5.2 Picture 元素 5.3 WebP / AVIF 現代圖片格式 5.4 Lazy Loading 5.5 效能優化策略總整理 5.6 響應式影片與嵌入媒體 第 6 章 RWD 效能優化 6.1 減少重排（Reflow） 6.2 減少重繪（Repaint） 6.3 Critical CSS 6.4 避免不必要的 Media Query 6.5 Lighthouse 指標優化 第 7 章 常見錯誤與反模式 7.1 固定寬度設計 7.2 使用 px 當作主要單位 7.3 忽略觸控可點擊範圍 7.4 忽略觸控裝置特性 7.5 表格未優化 7.6 字體過小 7.7 反模式總結 第 8 章 企業級 RWD 開發標準規範 8.1 Breakpoint 標準 8.2 命名規範 8.3 Layout 架構規範 8.4 元件設計原則 8.5 Code Review 檢查清單 8.6 UI/UX 檢核表 第 9 章 測試與驗證 9.1 Chrome DevTools 模擬 9.2 真機測試 9.3 自動化測試建議 9.4 視覺回歸測試（Visual Regression） 第 10 章 範例專案（完整實戰範例） 10.1 完整 Dashboard Layout 範例 10.2 關鍵響應式行為說明 10.3 範例操作說明 附錄 A 企業級 RWD 開發檢查清單（Checklist） A.1 專案設定 A.2 佈局（Layout） A.3 文字與字體 A.4 互動與觸控 A.5 圖片與媒體 A.6 表格 A.7 效能 A.8 無障礙（A11y） A.9 跨瀏覽器 A.10 測試 第 1 章 RWD 核心概念 1.1 為什麼需要 RWD？ 背景 在 2026 年的今天，全球行動裝置（手機 + 平板）流量佔比已超過 65%，企業面對的使用者橫跨多種裝置： ...