# 第三週切版助教直播筆記 by Sz
###### tags: `Sz` `第三週` `助教直播` `2021夏季切版班`
這場不聽會後悔指數：:star::star::star::star::star:

[開始覺得我是誰我在哪的請先讀OOCSS](https://hsiangfeng.github.io/css/20200517/168089779/)
## container 設定
css版本
scss版本
* 只能設定px，不可以%
* margin: 0 auto 要一起設定
* container 不能加其他內容
* 加保險不如先搞清楚到底下了什麼XD
* 斷點一定比 container 大
* **一開始就先設定好 container！**
## gutter
網格的間距padding是gutter除2

>Gutters 是介於欄位之間的間隙，經水平方向的 padding 產生。 我們在每一欄設置 padding-right 與 padding-left ，並使用負值的 margin 來抵銷每行的開頭與結尾以對齊網格內容。
>[name=引用 bootstrap]
### gutter問題
> container的那個padding跟gutter的寬度不一定會一樣嗎

看規範

## reset

img{
    max-width: 100%;
    height: auto;
    vertical-align:middle; // display: block;
}

## container 裡面的內容物
container 是設定 max-width
內容物是%數

## RWD 寫的順序
先寫好整個響應式變化再往下寫
範例
手機載具用絕對相對位置

## HTML 5 語意標籤

### section
一定要有標籤

### aside
關連度較低的部份
廣告、篩選工具等等等
刪除後也沒關係的內容（像 rwd 改為欄位較少的時候）

## 無語意標籤

div divider

## link 的 padding
點擊體驗
[第三週講義補充記得看](https://hackmd.io/@hexschool/rJNtWj0pu#%E5%BD%B1%E9%9F%B3%E8%A7%80%E5%BF%B5%E8%A3%9C%E5%85%85)
### 動線設計
欄位減少時，次要資訊要做取捨
#### 少即是多
同樣的元素，不同載具時的資訊量要做取捨
### 斷點時機
不同載具都有良好的視覺效果（易讀性）
以行寬度為例：舒適的行寬度
### 點擊範圍
44px 原則
給指腹 44px 以上的空間點選
### 斷點元素
同個區塊，不一定用同樣形式呈現
例如：navbar toggle
### 載具特性
touch & hover

## 小心 icon 的尺寸
記得找到 icon 的 外層
### 不是這個
### 是這個喔

## 圖片取代文字的疑問
[隱藏的文字與連結](https://developers.google.com/search/docs/advanced/guidelines/hidden-text-links)
[Google 圖片最佳做法](https://developers.google.com/search/docs/advanced/guidelines/google-images)