# 第三堂 RWD 響應式網頁

本頁連結：https://hackmd.io/FW2VFU2fR_KfWRPeIXKSkQ

1. 錄影
2. 作業說明：主線作業

## 活動提醒

1. 助教帶你做作業 - 直播課期間的每週六早上九點（連結會在 Discord 公告）
2. [同學們的分享會](https://hackmd.io/KxDPrWN5QhydzU6QCmw-3A)
可以分享的主題：
- 陪伴寫作業 ✅
- 筆記工具推薦 ✅
- 個人學習方式 ✅
- 工作經驗分享 ✅
- 個人的休閒、減壓方式 ✅
- 直播帶貨、個人政治傾向辯論 ❌

🌼 最受歡迎主題
條件：單一場直播分享會中，獲得 “最多” Emoji 的活動（三位）

🌼 狂熱分享者
條件：在以上時段中，分享超過三場（不限名額）

🌼 狂熱之王
條件：在切版直播系列課程中，分享總數最多的同學（累計場次計算）

🌼 天天都來聽
條件：在切版直播系列課程中，每一場都有留言

🌼 活動主要志工
條件：擔任任何兩場活動的主要志工

## 抽獎～

[Kata 大挑戰](https://casper-wang.notion.site/2025-21e2a065e9db80e5869ae775d96a7232)

抽獎器：`Math.floor(Math.random() * 46) + 1;`

## 課前提醒：

- **請先完成 [GGV](https://courses.hexschool.com/courses/20201122111/lectures/60728201) 練習**

## RWD 基本環境建立

- viewport 設定

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

- CSS media Queries 語法

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

## 權重覆蓋遊戲

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

世界奇觀

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

## 寬度與單位配置

- max-width：運用在 圖片與 HTML 標籤上（如 Container）
- 利用 % 來定義寬度
- box-sizing

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 15, 16 Pro Max - **440px (視專案族群)**

| 裝置 | Viewport 寬度（CSS px） |
| --------------------- | ------------------- |
| iPhone 15 | **393px** |
| iPhone 15 Plus | **430px** |
| iPhone 15 Pro | **393px** |
| iPhone 15 Pro Max | **430px** |
| iPhone 16 | **393px** |
| iPhone 16 Pro | **402px** |
| iPhone 16 Pro Max | **440px** |

所以如果是 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://www.figma.com/design/CYjKvZQo3db8xYCp6DCkKj/%E5%85%AD%E8%A7%92%EF%BD%9C%E9%9E%8B%E5%AD%90%E9%9B%BB%E5%95%86-W3%E3%80%81W4-%EF%BC%88student-ver.%EF%BC%89?t=IGSuF7auMdD4AvIb-0

### 作業等級表

1. LV1：品牌故事的 RWD
2. LV2：品牌故事＋產品列表的 RWD
3. LV3：做3頁以上的RWD

## 第五堂、第六堂 設計稿

設計稿：https://www.figma.com/design/omevevD7bxbB3wQfL3jXR8/%E5%85%AD%E8%A7%92%EF%BD%9C%E8%81%B7%E6%97%85-WorkWay%EF%BD%9C%E8%81%B7%E6%B6%AF%E8%AB%AE%E8%A9%A2%E5%AA%92%E5%90%88-%EF%BC%88student-ver.%EF%BC%89?node-id=4032-9080&p=f&t=4y6n7PomJhcCFoPp-0