前言

響應式設計解決多屏適配是好方案，但從印刷思維轉型極難：無固定頁面尺寸、無物理單位、無物理限制。隨著工具豐富，像素設計局限於桌面/移動端已成歷史。本文用動圖直觀演示 9 大基本原則，擁抱流暢網頁體驗。（僅講佈局，更多進階見 bradfrost.com）

響應式 vs 適應式

相輔相成、無對錯，視內容而定。

9 大核心原則

1. 內容流

屏幕越小，內容垂直佔用空間越多，內容向下延伸。習慣像素/點設計者需轉換思維，習慣後極好理解。

2. 相對單位

面對任意屏幕尺寸與像素密度，百分比等相對單位能靈活適應。寬度 50% 即視區寬度一半。

3. 斷點

預設點讓佈局變形（桌面 3 欄 → 手機 1 欄）。CSS 屬性多可實現斷點變形。位置取決於內容（如文案換行需加斷點）。慎用，邏輯不清易亂。

4. 最大/最小值

內容鋪滿手機螢幕好，但在電視上同樣鋪滿則不合理。設 width: 100%; max-width: 1000px，內容不超 1000px 填充螢幕。

5. 嵌套對象

緊密關聯元素放入容器，變易控制、簡潔明快。靜態單位（像素）適用於 Logo、按鈕等無需擴展內容。

6. Mobile First vs Desktop First

本質區別不大，但 Mobile First 帶來額外限制輔助決策。實務常雙端並行，擇優適配。

7. Web 字體 vs 系統字體

Web 字體炫酷但需下載，字多拖慢加載；系統字體極快（本機有）但平庸。權衡取捨。

8. 位圖 vs 矢量圖

圖標細節多、效果華麗 → 位圖；否則考慮矢量圖。位圖用 jpg/png/gif，矢量首選 SVG/圖標字體。注意：未優化圖片禁上線；矢量圖通常較小但舊瀏覽器可能不支援；曲線過多矢量可能比位圖大，明智取捨。

結語

掌握 9 大原則，響應式佈局不再無從下手，打造真正流暢的多屏體驗。