主內容 Content
桌機三欄 → 平板兩欄 → 手機單欄,內容不變、版面自動重排。
圖片 1
流體格線 Fluid Grid
欄位寬度以百分比配置,隨螢幕等比伸縮,不產生水平捲軸。
閱讀更多 →圖片 2
彈性圖片 Flexible Images
圖片設定 max-width:100%,永遠不會超出父容器寬度。
閱讀更多 →圖片 3
媒體查詢 Media Query
依螢幕寬度切換斷點,觸發對應的版面配置規則。
閱讀更多 →圖片 4
行動優先 Mobile First
先確保最小螢幕的可用性,再逐步增強桌機體驗。
閱讀更多 →