---
# System prepended metadata

title: '[RWD] Responsive Web Design 響應式網頁設計'
tags: [RWD]

---

# [RWD] Responsive Web Design 響應式網頁設計


###### tags: `RWD`


## 如何設計響應式的斷點？
響應式無法讓所有螢幕解析度都最佳化，最好只針對比較熱門的螢幕解析度去做優化，滿足大部分的使用者
* 舊網站：套 Google 分析觀察數據，了解使用者主要用哪些裝置
* 新項目：以熱門的解析度為主


## 網頁版型：Mobile First or Desktop First

### Mobile First
* 從手機的解析度開始設計網頁
* 適合情境：使用者多以手機瀏覽網頁，手機的靈活度要高一點
* 行動優先的框架：Bootstrap

### Desktop First
* 從電腦的解析度開始設計網頁
* 適合情境：PC 的使用者較多


## 行動裝置瀏覽網頁的基本設定
```htmlembedded=
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
```


## 網頁內容設計注意事項
* 不要把 PC 版所有內容全塞到手機版網頁內，資訊過多，使用者體驗不好，在手機版請將不太重要的資訊隱藏起來
* 為了較好的閱讀體驗，建議每單行字元數
  * 英文：32～80 個（[IBM Design Language](https://www.ibm.com/design/language/typography/type-basics/#comfortable-reading "Comfortable reading")）
  * 中文：30～40 個（[大眾字型學 (2)：怎麼製作美觀的文件版面？](https://blog.justfont.com/2013/05/popular-typography-2/ "其他考量與小結")）


## 樣式設計建議

### 點選範圍
* 勿做太小，建議至少 44 x 44px
  * [W3C Web Accessibility Initiative (WAI) - Target Size (Level AAA)](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html)：44 x 44px
  * [Apple - Human Interface Guidelines - Buttons](https://developer.apple.com/design/human-interface-guidelines/components/menus-and-actions/buttons/#best-practices)：44 x 44px
  * [Material Design 3 - Accessible design - Touch and pointer target sizes](https://m3.material.io/foundations/accessible-design/accessibility-basics#28032e45-c598-450c-b355-f9fe737b1cd8)：48 x 48dp
  * [Material Design 2 - Web - Touch Target](https://m2.material.io/develop/web/supporting/touch-target)：48 x 48px
  * [網站無障礙規範 - 十三指引 - 成功準則2.5.5：目標尺寸 (檢測等級AAA)](https://accessibility.moda.gov.tw/Accessible/Guide/68#%E6%8C%87%E5%BC%952.5)

### 圖片填滿父層容器，垂直水平居中顯示(部分區域會被裁掉)
```htmlembedded=
<picture class="pic-frame">
  <img src="xxx" alt="ooo" class="pic">
</picture>
```
```css=
img {
  vertical-align: top;
}

.pic-frame {
  width: 300px;
  height: 200px;
}

.pic {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
```


---

:::info
建立日期：2020-11-22
更新日期：2024-01-07
:::