# [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 :::