SyncETA Lite 的核心使用情境是「通勤前查詢」，這代表使用者絕大多數會用手機操作。今天要讓整個介面在不同螢幕尺寸下都保持好用。

檢視目前的問題

目前的 CSS 都是用固定寬高寫的，在手機小螢幕上，地圖、清單、滑桿很容易擠在一起或超出畫面。我們用 CSS Media Query 來調整。

建立基礎的響應式版面

修改 src/style.css：

/* 預設（手機優先）樣式 */
#app {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px;
  font-family: system-ui, sans-serif;
}

#map {
  width: 100%;
  height: 240px;
}

.search-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.search-form input,
.search-form button {
  padding: 10px;
  font-size: 16px; /* 避免 iOS Safari 自動放大輸入框 */
}

/* 平板以上 */
@media (min-width: 768px) {
  #app {
    max-width: 720px;
  }

  #map {
    height: 360px;
  }

  .search-form {
    flex-direction: row;
  }

  .search-form input {
    flex: 1;
  }
}

為什麼是「手機優先（Mobile First）」？

這裡刻意採用「先寫手機樣式，再用 min-width 往上加寬版樣式」的寫法，而不是反過來。這是前端開發的常見慣例，原因是：手機的限制條件（小螢幕、觸控操作）通常比桌面更嚴格，先滿足嚴格的條件，再逐步放寬，比反過來（先做寬版、再硬擠進小螢幕）更容易維護。

觸控友善的細節

• 按鈕與可點擊區域的高度至少抓 44px 以上，符合一般觸控熱區建議。
• 滑桿（Day 20 的信心水準調整）在手機上要確保夠寬、好拖曳，避免使用者要很精準才能點到。

用 Chrome DevTools 快速檢查

打開開發者工具，點選裝置模擬圖示（Toggle device toolbar），切換 iPhone、iPad 等不同尺寸預覽，確認地圖、清單、輸入框都沒有跑版或被截斷。

明天我們要暫停寫程式，改用簡單的方法蒐集真實使用者對這個雛形的回饋。