文件連結：https://hackmd.io/4PCQkX7TRCqgYKXLTUbV7w

# 第三週

## 課前資訊

- **記得錄影**
- 學習小卡都陸續寄出了，請同學留意看看信箱，如果 8/1 前沒有收到，可以跟我們聯絡
- 專題班分組事項
- 分組狀況：http://liberating-turtle-5a2.notion.site
- 主揪、參加其他人的團
- 專題班分組協助說明
- 下週公布主線任務完成率獎品 🎁🎁🎁
- 作業卡住該怎麼辦？
- 又抽星巴克：https://discord.com/channels/801807326054055996/1242307088273768562/1261509640232112228
- 分組任務：https://hackmd.io/p6RQTYJIR3m0qJ0OKIQE5g
- 單人分組任務：與其他單人的組成同一組

## 課前提醒：

- 第八週作業可以組隊一起交（可以與專題夥伴一起或另外組隊）
- 可自行找學員一起組隊完成第八關 LV2 以上，一組最多四人
- 需提供 GitHub Repo，我們會從 commit 更新列表，檢視各組員做了哪些頁面
- 每位組員至少需做一頁
- **請先完成 [GGV](https://courses.hexschool.com/courses/2020112211/lectures/53654004) 練習**

| 以下的 no...，是老師上課的小抄

## 環境建立

- viewport 設定 (no.1)

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

- CSS media Queries 語法 (no.2)

/* 針對螢幕寬度大於等於 600px 的裝置 */
@media (min-width: 600px) {
  body {
    background-color: lightblue;
  }
}

## 權重覆蓋遊戲

- HTML 標籤：1 分
- class 選擇器：10 分
- ID 選擇器：100 分
- inline style：1000 分
- !important：10000 分

世界奇觀

權重案例網站：
- https://www.apple.com/tw/

## 寬度與單位配置

- max-width：運用在 圖片與 HTML 標籤上(no.3)
- % 單位的運用 (no.4)、box-sizing 講解
- max-width 與 % 的運用 (no.5)

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

*, *::after, *::before {
  box-sizing: border-box;
}

- 圖片技巧：https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/picture

<picture>
  <!-- 當螢幕寬度少於600px時，替換圖片 -->
  <source srcset="./images/M2.png" media="(max-width: 992px)">
  <!-- 預設圖片，通常是桌面版本 -->
  <img src="./images/M1.png" alt="Logo">
</picture>

## 斷點規劃+大網站設計範例

常見斷點設計：https://getbootstrap.com/docs/5.3/layout/containers/

Ｑ：為什麼沒有設計更小的斷點呢？
Ａ：因為手機型號太多，更小的情況下通常都是直接用單欄呈現，然後再針對 “特定族群” 另外定義（如果必要）

特定族群：
- iPhone 14,15 Pro Max - **430px (視專案族群)**

所以如果是 PC 做到手機的話，語法就會有點像是這樣：

* {
  box-sizing: border-box;
}

.container {
  max-width: 960px;
}
.header {
  height: 80px;
}
.column-3 {
  width: 33%;
  padding-left: 20px;
  padding-right: 20px;
}
@media(max-width: 768px){
  .header {
    height: auto;
  }
  .column-3 {
    width: 50%;
  }
}
@media(max-width: 576px){
  .column-3 {
    width: 100%;
  }
}

## 叮嚀

網頁有 x 軸，有的話會被釘在牆壁上

## 第三週主線任務

- 第三週 - 眼鏡形象網站
- 設計稿：https://xd.adobe.com/view/5b20cbc4-5c64-4b67-814e-633b078a8cd4-0e73/grid/
- [圖片下載](https://github.com/hexschool/2022-web-layout-training/tree/main/week3-4)

## 作業等級表

1. LV1：只做 header 與 footer 的 RWD
2. LV2：任選一頁，僅做 PC 版型（header 與 footer 需含 RWD）
3. LV3：任選一頁，整頁都需含 RWD
4. LV4：做二~三頁以上的 RWD
5. LV5：所有頁面都有設計

UI 設計師跟前端工程師合作

1. PC
2. Pad
3. Mobile