RWD 最佳實踐：行動優先與斷點策略

在進行 響應式網頁設計 (Responsive Web Design, RWD) 時，除了懂得使用 Media Query 和彈性版面配置之外，真正讓一個網站既美觀又實用，靠的是一系列 最佳實踐 。

這些原則可以幫助您開發出跨裝置、跨瀏覽器都能順暢運行的網站，提升可讀性、可用性與效能。

核心概念

彈性容器

使用相對單位，例如：%、em、rem，而非固定像素來定義版面配置。

.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.column {
  width: 50%; /* 使用百分比而非固定像素 */
}

響應式影像

讓影像能夠縮放以適應容器的變化。

.img-resp {
  max-width: 100%;
  height: auto;
}

媒體查詢

根據不同條件套用不同的 CSS 樣式。

/* 手機 */
@media screen and (max-width: 768px) {
  .column {
    width: 100%;
  }
}

/* 平板 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .column {
    width: 50%;
  }
}

設計策略

Desktop First 桌機優先

先設計桌機版，再縮減到小螢幕：

/* 預設（桌機版）樣式 */
.wrapper {
  display: flex;
}

.sidebar {
  width: 25%;
}

.content {
  width: 75%;
}

/* 平板 */
@media screen and (max-width: 1024px) {
  .sidebar {
    width: 30%;
  }

  .content {
    width: 70%;
  }
}

/* 手機 */
@media screen and (max-width: 768px) {
  .wrapper {
    flex-direction: column;
  }

  .sidebar,
  .content {
    width: 100%;
  }
}

Mobile First 行動優先

先設計手機版，再逐步擴展到更大螢幕：

/* 預設（手機版）樣式 */
.container {
  padding: 10px;
}

/* 手機版隱藏選單 */
.nav-menu {
  display: none;
}

/* 平板以上 */
@media screen and (min-width: 768px) {
  .container {
    padding: 20px;
  }

  .nav-menu {
    display: block;
  }
}

/* 桌機版 */
@media screen and (min-width: 1024px) {
  .container {
    padding: 40px;
  }
}

內容優先

/* 重要內容優先顯示 */
.important-content {
  order: -1; /* 在 Flexbox 中優先顯示 */
}

@media screen and (max-width: 768px) {
  .secondary-content {
    display: none; /* 手機版隱藏次要內容 */
  }
}

觸控友善設計

增大可點擊區域。

.touch-target {
  min-height: 44px;
  min-width: 44px;
  padding: 12px;
}

增加按鈕間距。

.button-group .button {
  margin: 5px;
}

效能考量

使用 CSS 處理簡單動畫。

.menu-toggle {
  transition: transform 0.3s ease;
}

避免在小螢幕載入大圖片。

@media screen and (max-width: 768px) {
  .hero-image {
    background-image: url("small-image.jpg");
  }
}

@media screen and (min-width: 769px) {
  .hero-image {
    background-image: url("large-image.jpg");
  }
}

響應式影像

<picture> 是一個新的 HTML5 標籤，不需要 Javascript、也不需要 CSS，單純 HTML5 就可以達成響應式圖片的設定。<source> 是用於載入圖片，相關的設定如下：

• srcset: 指定替代圖片的路徑。
• media: 媒體查詢。
• type: 指定替代圖片的格式，如果不符合，就執行下一個。

<picture>
  <source media="(min-width: 1201px)" srcset="./images/1920.jpg">
  <source media="(min-width: 1025px)" srcset="./images/1200.jpg">
  <source media="(min-width: 769px)" srcset="./images/1024.jpg">
  <source media="(min-width: 415px)" srcset="./images/768.jpg">
  <source media="(max-width: 414px)" srcset="./images/414.jpg">
  <img class="img-resp" src="./images/1920.jpg" alt="">
</picture>

小提醒

• <source> 的順序很重要、瀏覽器會直接使用第一個符合的 <source> 而忽略掉後續的標籤。
• 最後再指定一個 <img> 元素作為 <picture> 標籤中的預設圖片、當瀏覽器不支援 <picture> 標籤或是沒有符合的 <source> 時，則直接顯示 <img>。

幾個實務重點

• 先讓版面自己會適應：善用 格線 的自動換欄與 彈性盒子 的換行，真的撐不住時才加 斷點。
• 尺寸用相對單位：字級用 rem，寬度用 max-width 搭配百分比，見 單位表示法。
• 圖片別撐破版面：至少加上最大寬度限制，需要換圖時用 響應式影像。
• 觸控區域夠大：建議至少 44px 見方，重要資訊別只靠滑鼠移入呈現。
• 顧及效能：行動網路較慢，壓縮樣式 與延後載入都有感。

常見問題

為什麼建議行動優先？

小螢幕的空間最有限，先做好取捨才不會把桌機版硬塞進手機。樣式上也比較乾淨：用放大條件逐步增強，而不是層層覆蓋。

斷點要設幾個？

需要幾個就設幾個。多數網站兩到三個就夠，重點是依版面實際撐不住的位置決定，而不是照著機型清單。

圖片在響應式中怎麼處理？

至少加上最大寬度限制避免撐破版面；需要依裝置換不同尺寸或格式時，用 響應式影像 的語法交給瀏覽器挑選。

觸控裝置有什麼要注意的？

點擊區域要夠大，建議至少 44px 見方；也別讓重要資訊只在滑鼠移入時出現，觸控裝置根本觸發不到。

延伸閱讀

媒體查詢格線系統 grid響應式影像 <picture>響應式網頁設計