筆記：RWD（響應式網頁設計）檢查重點與實務

1. 可視容器

• 檢查橫向捲軸
  不同寬度下，觀察是否出現橫向 scrollbar。若有，找出哪個元素溢出容器。

• 避免 1px 誤差的 media query
  不要讓 min-width 和 max-width 設為同樣的值，避免臨界點跳動。 範例

  /* 錯誤寫法，會有1px跳動 */
  @media (max-width: 600px) { ... }
  @media (min-width: 600px) { ... }
  
  /* 正確寫法 */
  @media (max-width: 599px) { ... }
  @media (min-width: 600px) { ... }
  
  

• position: fixed 元件
  檢查最小寬高，避免元素被隱藏或遮蔽內容。

• 避免 vh/dvh 單位跳動，建議用 lvh/svh

• 手機橫置測試
  高度較低時是否能操作內容，safe-area 是否需要滿版。

---

2. 文字

• 標題斷行 balance/pretty
  text-wrap: balance; 或 text-wrap: pretty; 讓標題多行長度更平均，美觀。 範例

  h1 {
    text-wrap: balance;
  }
  
  

• 斷行禁則
  關鍵字/公司名不能斷行時，可設 white-space: nowrap; 或 display: inline-block;

• 長網址處理
  超長文字可加 word-break: break-all;

• 用 media query 控制 br 標籤顯示
  不同寬度調整斷行方式。 範例

  @media (max-width: 600px) {
    br {
      display: none;
    }
  }
  
  

• 一行不超過 35 字，善用 ch 單位
  範例

  p {
    max-width: 35ch;
  }
  
  

---

3. 圖片、影片

• 圖片自適應容器寬度
  width: 100% 或 max-width: 100%

• 圖片高度自動
  有 height 屬性時，CSS 設 height: auto; 避免變形。

• object-fit: cover 處理縮放裁切
  範例

  img {
    object-fit: cover;
  }
  
  

• 影片比例
  內嵌影片可設 aspect-ratio 或用 JS 套件避免黑邊。 範例

  .video-wrapper {
    aspect-ratio: 16 / 9;
  }
  
  

---

4. 互動

• 按鈕/連結要夠大，易觸控
  建議尺寸超過 44px。

• hover 互動需考慮手機

• 特效/動畫只在桌面啟用
  可偵測 user-agent 或條件式啟用。

• 動畫尊重 prefers-reduced-motion 設定
  CSS 範例

  @media (prefers-reduced-motion: reduce) {
    * {
      animation: none !important;
      transition: none !important;
    }
  }
  
  

  JS 範例

  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (!prefersReducedMotion) {
    // 執行動畫
  } else {
    // 不執行動畫或提供簡化效果
  }
  
  

---

5. 補充

• input 輸入欄位字體建議 16px 以上
  小於 16px 時，mobile Safari 會自動放大畫面。 範例

  input {
    font-size: 16px;
  }
  
  

---

6. media query 寫法選擇

• 只用 max-width
  適合 desktop-first，簡單但彈性較低。

• 只用 min-width
  適合 mobile-first，主流做法，樣式覆蓋更直覺。

• 特定區間需搭配 max-width
  範例：只針對平板（600~1023px）

  @media (min-width: 600px) and (max-width: 1023px) {
    /* 平板樣式 */
  }
  
  

---

小結：
這些檢查點和技巧能幫助網站在各種裝置、寬度下都維持良好體驗和穩定性，並提升可讀性與無障礙。建議 mobile-first，善用新 CSS 屬性與媒體查詢，並尊重使用者偏好。