# HTML(7/10) Day 16 五倍紅寶石(第八屆共筆)(2021/7/19)
## 作業檢討：
- 每個大區塊建議都要設定 class 名稱，內層的東西則看需求。
- 切版的時候要考慮到以後的需求，像是資料增加或減少時，我是要一個個重新設定，還是有甚麼方式可以快速修改，也就是說要增加彈性，盡量不要寫死。
ex:用:nth-child()時，如果裡面放固定數字，會變得不好維護，可以用 an+b、even、odd 讓他更有彈性。
- $ 是有意義的，可以跟多少錢包在一起，不要用偽元素。
- nav 是導覽列的意思，通常一個頁面只會有一個導覽列，不要看到 a 就用 nav 包，且建議給他一個 class 名。
- 通常 h 都會搭配 p 一起使用，有標題就會有內文。
- class 命名建議不要用縮寫，過一段時間回來看會看不懂。
- 按鈕內容置中：不設定寬高，直接設定 padding 讓他看起來是置中的。
- 每一個標籤都要有其用途，講不出來他是用來做甚麼的就不要用他，不要預留不必要的容器。

---

## RWD：
### 媒體查詢：
- Why?
為了讓使用不同裝置(螢幕大小)的使用者更好閱讀。
- 要支援到多大或多小的螢幕?
主要看此裝置使用者多寡及付費比例去看，有一定的營收就可以做，或是老子就任性不想支援他們也行。

@media 裝置類型 and (條件一) and (條件二) and... {
符合條件要執行的CSS
}

有分 min-width 及 max-width 兩派別，建議用 min-width 會讓原始碼看起來不那麼髒，目前不是很懂，等以後實作可能會比較清楚。

- min-width：768 px 白話文就是 ≥ 768 px 的裝置都會執行裡面的CSS。
因為優先權的問題(後寫的會蓋掉前面寫的)，像素小的要寫在前面(小到大)。
- max-width：768 px 白話文就是 ≤ 768 px 的裝置都會執行裡面的CSS。

無斷式縮放：除了最外層以外，內層不要把寬度寫死，利用 % 讓他在縮放的時候也會無時無刻跟著變動，不會有斷掉的感覺。

各裝置像素：
| 裝置 | Mobile S | Mobile M | Mobile L | iPad | iPad Pro | 桌機 |
|:----:|:--------:|:--------:|:--------:|:------:|:--------:|:------:|
| 直 | 320px | 375px | 425px | 768px | 1024px | 1200px |
| 橫 | | 568px | | 1024px | 1366px | |

---

### Xmind：
[CSS指令](https://www.xmind.net/m/YMhNxU)

---

###### tags: `HTML` `CSS`