# 切版經驗分享

* 養成 mobile first 的切版習慣
* 減少 html 巢狀層：以 HyUI header 和 footer 為例
* @media screen and (min-width: $wwMaximum) 時的區塊、元件處理
* css 單位 vw vh 在 RWD 的應用

---
## 養成 mobile first 的切版習慣

- 優先移動設備使用者體驗放在首位：[＊使用手機上網比例已超過一半（58%+）](https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/#:~:text=Mobile%20accounts%20for%20approximately%20half,since%20the%20beginning%20of%202017.)
- 優先考慮資料內容，讓使用者舒適瀏覽網頁。
- 從小螢幕開始製作草圖或原型。在有限的空間中，確認每個關鍵元素都能呈現在畫面顯要的位置。

### 先考慮行動設備撰寫 CSS 的好處
- 大部分的情況下，預設樣式即可滿足小螢幕的需求，例如 `<div>`, `<section>` 等的預設寬度是100%。如果設定寬螢幕的屬性，到小螢幕時還要寫回預設值。
- 降低css複雜度，極簡、有效、好維護
- 使用 max-width query 如 @media (max-width: 800px)
- 合併使用 min-width 和 max-width queries，如 @media (min-width: 800px) and (max-width: 1200px)

教學影片：https://youtu.be/LCveWtlvSbM

---
## 減少 html 巢狀層：以 HyUI header 和 footer 為例
[範例說明](https://codepen.io/yachiung/pen/QWBvjGG)

---
## @media screen and (min-width: $wwMaximum) 時的區塊、元件處理
[範例說明](https://codepen.io/yachiung/pen/vYamEzZ)

---
## css 單位 vw vh 在 RWD 的應用
- vw: 1% of the viewport's width.
- vh: 1% of the viewport's height.
viewport : 視埠。使用者可用來看網頁的區域。如果是桌機，viewport 就是瀏覽器的網頁顯示區。如果使用手機，viewport 就是螢幕大小。

*範例說明*