---
tags: 網頁切版直播班 - 2021 夏季班
---

# 檢核點 - 第三週

**重點觀念：**
1. RWD 斷點設定

**回覆參考：**

（連結部分請用超連結在文字上）
恭喜你完成響應式作業，斷點部分會依照
熱門載具解析度
https://hackmd.io/@YmcMgo-NSKOqgTGAjl_5tg/HJpJk8ABU/https%3A%2F%2Fhackmd.io%2F8-8d2YbtSXS5Z-WSyFJruw%3Fboth#%E6%96%B7%E9%BB%9E%E8%A6%8F%E5%8A%83%E5%A4%A7%E7%B6%B2%E7%AB%99%E8%A8%AD%E8%A8%88%E7%AF%84%E4%BE%8B
與 BS5 斷點來檢視https://getbootstrap.com/docs/5.0/layout/grid/#grid-options

三四週一起提交的話可以加上此回覆：

恭喜過關，有看到你三四關一起提交，修改建議會也會一並提供在第四關唷！

**注意：**
這週開始不需要去檢查字體、字重、字體大小、行高、間距等等樣式細節，若有明顯的錯誤，可以以一句話提醒，例如：間距部分有部分設定錯誤，可以再參考設計稿做調整

---

**斷點設計**

操作上：
* 斷點檢查：檢視在 375、576、768、992px 是否會顯示 x 軸，有學生會只顧及 375、768px，但介於熱門斷點之間的解析度會沒顧到
* 在 767px header menu 部分，可以變成手機版，這樣介於 4xx~6xx 的瀏覽體驗會比較好些
* 斷點若同學設定很奇怪，可以建議他平板使用 992，手機使用 576px (header 用 767px)

程式碼：

* .container 容器設計需使用 max-width，不要使用 width，數值須依照設計稿的提供： 桌機是1140px，平板是 720px，手機是 375px
* container 需設定左右 padding 15px
* 不同斷點不要重複寫一樣的樣式
* 內容器寬度用 % 設定，常見錯誤是使用 px
* img RWD 設定 max-width:100% height:auto，常見錯誤會使用 width: 100%
* 設定 box-sizing: border-box

**使用者體驗**

* 點擊體驗：PC 版表頭選單，可以在選單連結 a 加上 display: block ，並藉由 padding 來增加點擊範圍
* 點擊體驗：按鈕與連結部分是否有做設計 hover 效果，例如確認送出的按鈕
* 使用者習慣：.logo 是否有加上回首頁的連結， logo 通常都會有回首頁的功能連結
* 表單可以設計 label for、id 部分來提升使用者體驗

助教新增建議：

*