RWD 手機版練習

不是把桌面版縮小,而是重新安排窄螢幕上的閱讀順序、操作大小與內容密度。

以 390px 寬度呈現目前網站,檢查標題、卡片、按鈕與文章閱讀順序。
練習目標
360px 也能舒服閱讀
使用技術
Media Query、語意 HTML
目前成果
首頁與文章頁皆支援

我想練習什麼

桌面版改成單欄只是第一步。手機上的標題不能太大、按鈕不能太小,文章摘要與分類也要維持清楚層級。

檢查項目

  • 360px 寬度沒有橫向溢位。
  • 主要按鈕與連結保留足夠操作高度。
  • 導覽改為行動版選單。
  • 文章正文縮短行寬並調整引用文字。

這次學到的事

響應式設計是在不同空間重新決定優先順序。每增加一個區塊,都需要同時思考桌面與手機上的用途。