# 第三週｜課程直播｜切版班 by Sz
###### tags: `Sz` `第三週` `直播筆記` `2021夏季切版班`

[老師的錄影軟體-screenflow](https://www.telestream.net/screenflow/overview.htm?gclid=CjwKCAjw3MSHBhB3EiwAxcaEuxNUU8mn8H_to5b8Nv5SI4PZE3dRhdgoi5cvdl791FHszyjBoGj54hoCNyMQAvD_BwE)

gulp和bs5內的node-modules是一樣的嗎？

## 新服務上線：校長午餐除BUG
### 7/19(一)、7/21(三)、7/22(四)
每天早上九點分享 Slack 排隊報到區
中午 12~1 點開 ZOOM，一一協助報到成員 Debug！
校長除掉你的bug之後，給你滿滿罪惡感
讚啦

## 每日助教服務
你就不管，你就問爆
六到八週，學長姐也來囉

## 組長不知道
組長不知道喔

## 環境
環境最難
每個公司、每台電腦都不一樣

第一天就架環境
PHP+MYSQL+docker
邊哭變架
npm install
docker start

光環境就可以刷不知道多少人了

## head

<meta name="viewport"
content="width=device-width,
initial-scale=1.0"> 

響應式一定要的資料

width=device-width

不加解析度會有問題

### 鬼故事

<meta http-equiv="X-UA-Compatible" content="IE=edge">

老骨頭，新皮肉的IE10（裡面很舊）
沒加這行，會用老骨頭跑

[mdn 響應式資料](https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Responsive_Design)

max-width:768px
768以下會開啟這個設定

## 觀念中的觀念
css 的語法中，下面的語法會蓋過上面的語法
先看權重再看先後

| 選擇器| 權重分數 |
| -------- | -------- |
| HTML 標籤選擇器 | 1 分 |
| Class 選擇器 | 10 分 |
| ID 選擇器 | 100 分 |
| inline style | 1000 分 |
| !important | 10000 分 |

移到 css 選擇器上面，這裡也可以看

選擇器相加起來式會有差的

.title(10分)
h1.title(11分)
.className a (11分)
.on_sale li a, .sale_category li a, .sale_news li a (12分)

### id 留給 js, 其他的程式用
錨點
但其實大部分程式也不一定要用 id 去選取

## QA
為什麼不是寫 width 而是 max-width
> 因為有以上以下

想請問設定min-width 跟 max-width 差異? 甚麼情況才使用min-width?
> min-width 會由小裝置寫到大裝置：手機優先
> max-width 會由大裝置寫到小裝置：PC 優先

請問bootstrap寫在class的用法跟inline選擇器是一樣的嗎 因為都是寫在html 有些不清楚
>這問題我很喜歡欸
>他是把class寫得很語意化，語意到放在class裡像是直接加style，但其實他還是原本就已經設定好的 css 樣式喔！

gulp 跟 vue 可以同時用嗎
>前端任務工具 - gulp
>單頁式網頁 js 框架 - vue

## 沒有版本控制的公司
就是重複蓋
蓋蓋蓋
蓋到辭職

## a
沒作用請記得加href="#" 代表點回本頁，就是本頁

## @media 和 @media screen
screen 設定載具用還有像print之類的，目前不太會用到，要用到再查就好

## max-width
讓響應式的網頁的內容可以最大顯示這個寬度
但視窗沒那麼大之後，就可以一起縮小

## css reset 之你就加

img {
max-width: 100%;
height:auto;
}

https://developer.mozilla.org/ja/docs/Web/HTML/Element/video
video 需要也加

## 圖片大，就限制客戶上傳大小（後端）

## max-width
容器下 max-width
內容物的寬度下 %

## margin-top, bottom
不要用%
line-height, 或是單位rem, px

## margin-left, right
可用%

## padding
沒辦法autoㄉ

## 斷點可以更換背景

## 基本斷點建議
992, 767
### 響應式圖片
還沒在作業中用過，之後應該會想用用看 <picture>
https://codepen.io/szyln/pen/MWmaGwx
## 標準
5天完成全部
5小時首頁