RWD 響應式示範

同一份 HTML 自動適應所有螢幕

拖曳預覽框右側把手縮放寬度,你會看到版面在斷點上自動重新排列——這就是 Media Query 的作用。

主視覺圖片
隨容器彈性縮放

主內容 Content

桌機三欄 → 平板兩欄 → 手機單欄,內容不變、版面自動重排。
圖片 1

流體格線 Fluid Grid

欄位寬度以百分比配置,隨螢幕等比伸縮,不產生水平捲軸。

閱讀更多 →
圖片 2

彈性圖片 Flexible Images

圖片設定 max-width:100%,永遠不會超出父容器寬度。

閱讀更多 →
圖片 3

媒體查詢 Media Query

依螢幕寬度切換斷點,觸發對應的版面配置規則。

閱讀更多 →
圖片 4

行動優先 Mobile First

先確保最小螢幕的可用性,再逐步增強桌機體驗。

閱讀更多 →