---
tags: 網頁切版直播班
---

# 檢核點 - 香水電商

**第二週重點觀念：**
1. 手刻 RWD 觀念

**第三週重點觀念：**
1. Bootstrap
2. 格線系統：.container、.row、.col 1~12 是否有使用正確
3. SCSS 修改主題色等等

**第二週回覆參考**

（連結部分請用超連結在文字上）
恭喜你完成響應式作業，斷點部分會依照
熱門載具解析度
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

**第三週回覆參考：**

整體練習的很好，SCSS 與格線、元件運用的也很好～恭喜過關

---

## 第二週：

**操作上**

* 斷點檢查：檢視在 375、576、768、992px 是否會顯示 x 軸，有學生會只顧及 375、768px，但介於熱門斷點之間的解析度會沒顧到
* 在 767px header menu 部分，可以變成手機版，這樣介於 4xx~6xx 的瀏覽體驗會比較好些

**程式碼**
* .container 容器設計都用 width，沒有用 max-width
* 不同斷點不要重複寫一樣的樣式
* 設定 meta viewport
* 使用 max-width 取代 width，內容器寬度用 % 設定
* img RWD 設定
* 設定 box-sizing: border-box

**使用者體驗**

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

**SCSS 檢核點**
1. 是否有善用巢狀寫法
錯誤寫法：

    .header{
     .menu {}
     .menu li {}
    }

正確寫法

    .header{
     .menu {
      li{}
     }
    }

1. class 階層是否超過 5 層

錯誤寫法：

    .wrap .header .menu li a span

正確寫法：

    .header .menu span

1. 是否有使用 @import，還是 SCSS 都全部寫在 all.scss。可以引導學員用 reset、variable、layout、index、page.scss 的階層來拆分

1. SCSS 位置有寫對
如果是共用的 class，不宜寫在特定的 page.scss 裡面，例如以下範例

index.scss 上，他寫了這個 class，.font-style-xs ，但這 class 很明顯是全站上很多地方都會出現的 class，此時就不宜放在 index.scss 上，比較適合放在 layout.scss，或是獨立一個 site、base、util 等等命名的 class 會比較適合，但不宜放在 index.scss 上

1. 斷點設計
SCSS 上，如果他有直接寫以下 media 寫法，請他嘗試用這兩部影片來優化

mixin 工具篇
載具篇 - @mixin+@content 設計響應式設計超方便

    @media(max-width:767px){
     .header{
         width:50px;
        }
     }

1. 嘗試用資料夾分類管理 SCSS
假使有做很多頁，例如 location、index、faq.scss，那可以用一個 pages 資料夾來歸類，這樣根目錄的 SCSS 結構歸類會比較完善
或者說 layout.scss 比較肥大，也可以多一個 layout 的資料夾，將區塊拉出為 header.scss 與 footer.scss
請依照以上兩點給予建議，如果有寫的不錯的同學，我會再補上給予建議。

附註：SCSS 影音教學補充
prepos 軟體安裝教學
SCSS 寫法
import 檔案拆分
mixin 工具篇
載具篇 - @mixin+@content 設計響應式設計超方便
結構篇 - 如何循序漸進優化網頁架構

助教新增建議：

---

## 第三週
Bootstrap 範例參考：
* [首頁](https://codepen.io/Bingbingboom/pen/gOmGPjp)
* [產品內頁版本1 Bs4](https://codepen.io/AliceChiang/pen/GRZmjed?editors=1010)
* [產品內頁版本2 Bs4 (position)](https://codepen.io/AliceChiang/pen/gOrWgOY)
* [水平表單](https://codepen.io/Bingbingboom/pen/abJLxBV)
* [後台首頁](https://codepen.io/Bingbingboom/pen/MWprQZG)