---
# System prepended metadata

title: "\U0001F3C5 切版任務 Day14 - RWD 觀念補給"
tags: [軟體工程師體驗營 - 2024]

---

---
tags: 軟體工程師體驗營 - 2024
---

# 🏅 切版任務 Day14 - RWD 觀念補給


## 題目 
請回答關於 RWD 的三題問答題：

### 第一題 

請說明 Mobile First 設計與 Desktop First 設計分別是什麼意思？

### 第二題 

請問下方代碼這種寫法是屬於 Mobile First 設計還是 Desktop First 設計？
```css=
.item{
  width: 100%;
}
@media (min-width: 768px) {
  .item{
    width: 50%;
  }
}
@media (min-width: 1440px) {
  .item{
    width: 25%;
  }
}
```

### 第三題

請問當螢幕寬度小於 414px 時 content 寬度為多少？為什麼？
HTML：
```htmlembedded=
<body>
    <div class="content"></div>
</body>
```
CSS：
```css=
.content{
  width: 25%;
  margin: 10px;
}
@media (max-width: 414px) {
  .content{
    width: 100%;
  }
}
@media (max-width: 768px) {
  .content{
    width: 50%;
  }
}
```

## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）

![](https://i.imgur.com/vftL5i0.png)

<!-- 

解答：
第一題：
手機優先設計從最小寬度開始設計，一開始直接寫的是手機版，往後是 @media (min-width: 768px){...}、@media (min-width: 1024px){...} 等等這種逐漸往大螢幕設計的順序。

桌機優先設計從最大寬度開始設計，一開始直接寫的是桌機版，往後是 @media (max-width: 768px){...}、@media (max-width: 414px){...} 等等這種逐漸往小螢幕設計的順序。

第二題：
Mobile First，因為他是從最小寬度開始設計的。

第三題：
CSS 的順序是後面會覆蓋前面的，所以手機版已經被平板尺寸的樣式覆蓋掉，不管是平板還是手機版都會顯示 50％ 寬度。
-->


回報區
---

| 報數 | Discord 名字  |  Codepen／其他回饋                                                         |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 | Meng | [Codepen](https://codepen.io/menglin1203/pen/gOJppRd) |
|  02  | Aya | [Codepen](https://codepen.io/NoNameNote/pen/XWwbbqN) |
| 3 | Hailey | [Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/ExzjjGX) |
|4|Michelle0417|[Codepen](https://codepen.io/michelle0417/pen/WNBvvKe)|
|  5  | Camila | [Codepen](https://codepen.io/camilalo/pen/vYwONRo) |
|  6  | Daphne | [Codepen](https://codepen.io/DaphneShen/pen/QWRbbzw) |
|  7  | Winnie | [Codepen](https://codepen.io/codepen-io-winnie/pen/YzbXyjm?editors=1000) |
|  8  | Chia Pin | [Codepen](https://codepen.io/joker-cat/pen/LYoVpKK) |
|  9  | Emma | [Codepen](https://codepen.io/huang_L/pen/rNgVOXZ) |
|  10  | JUN_ | [Codepen](https://codepen.io/Jun-L/pen/wvbaMKe?editors=1111) |
|  11  | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/ExzjPJj) |
|  12  | Jiahe | [Codepen](https://codepen.io/Andywang-95/pen/qBGdOXJ?editors=1100) |
|  13  | Larry | [Codepen](https://codepen.io/larrylinr5/pen/eYaNZZm?editors=0010) |
|  14  | s870012 | [Codepen](https://codepen.io/idzrvbnl-the-bashful/pen/pomJyWo) |
|  15  | Eden |[Codepen](https://codepen.io/iseden/pen/MWdwymY)|
|  16  | 詹姆士 |[Codepen](https://codepen.io/z111048/pen/qBGdZGx)|
|  17  | LGJason | [Codepen](https://codepen.io/j811108/pen/MWdwyMj) |
|  18  | easonpan | [Codepen](https://codepen.io/easonpan0904/pen/WNBvxvQ) |
|  19  | hongru-LyNn | [Codepen](https://codepen.io/LyNnYWu/pen/YzbXWxM?editors=1000) |
|  20  | Mionne | [Codepen](https://codepen.io/neohyntw/pen/dyEoGxv) |
|  21  | LYC | [Codepen](https://codepen.io/LY-C/pen/XWwbjaQ) |
|  22  | Eileen | [Codepen](https://codepen.io/Eileen-io/pen/QWRbNrL) |
|  23  | 小白 | [Codepen](https://codepen.io/xjbowjbr-the-builder/pen/QWRbGGP) |
|  24  | kawa | [Codepen](https://codepen.io/z83xji6/pen/oNRXzaL?editors=0010) |
|  25  | Kaya | [Codepen](https://codepen.io/kayaribi/pen/OJYVWEM) |
|  26  | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/PovqpKm) |
|  26  | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/ZENGepq) |
|  27  | yunyouob | [Codepen](https://codepen.io/ozkkvlsu-the-animator/pen/QWRbvwz)|
|  28  | leo.chang | [Codepen](https://codepen.io/s16777216/pen/oNRXWBw) |
|  29  | 白白 | [Codepen](https://codepen.io/YuBai/pen/ExzjmwN) |
|  30  | Yuwen | [Codepen](https://codepen.io/Yuwen-the-reactor/pen/LYoVLav) |
|  31  | Maxine | [Codepen](https://codepen.io/Maxine0713/pen/LYoVLrq) |
|  32  | JY | [Codepen](https://codepen.io/jylee0805/pen/vYwOxoZ?editors=1010) |
|  33  | Tough life | [Codepen](https://codepen.io/hakuei0115/pen/rNgVwgr) |
|  34 | Macihuang | [Codepen](https://codepen.io/macy1215/pen/ExzjbPb) |
|  35  |  Angela_la   | [Codepen](https://codepen.io/Angela-the-builder/pen/dyEojqr)   |
| 36 | yo0x0oy | [Codepen](https://codepen.io/Dayton-Hsieh/pen/ZENGjdx) |
|  37  | WEIWEI | [Codepen](https://codepen.io/weiwei93/pen/ZENGMoV) |
| 38 | 小趴 | [Codepen](https://codepen.io/papa2415/pen/abrOaeO)|
| 39 | jerry | [Codepen](https://codepen.io/sony791210/pen/vYwOVKe)|
| 40 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/OJYVowx?editors=1100) |
|  41  | Lauren | [Codepen](https://codepen.io/Lauren8/pen/QWRbZqP) |
|  42  | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/VwOLGYZ?editors=1100) |
|  43  | mike_2049 | [Codepen](https://codepen.io/mike2049/pen/GRaJwaJ?editors=1100) |
|  44  | ninii傳教士 | [Codepen](https://codepen.io/niiniiii/pen/RwmPvLQ) |
|  45  | FUROTO | [Codepen](https://codepen.io/oditudnw-the-flexboxer/pen/oNRXOjr) |
|  46  | JESS | [Codepen](https://codepen.io/-8412/pen/vYwOMVy) 
|  47  | oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/GRapREa) |
|  48  | peggy | [Codepen](https://codepen.io/peggy0419/pen/rNgOerx) |
|  49  | boin |[Codepen](https://codepen.io/boinji/pen/abrvNrW)|
| 50 | maru3096 | [Codepen](https://codepen.io/deamru/pen/QWRjOwL) |
| 51 | Zander | [Codepen](https://codepen.io/chuangmaster/pen/OJYyOaP) |
| 52 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/gOJaoPa) |
|  53  | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/XWwmzGZ) |
|  54  | 勾小勻 | [Codepen](https://codepen.io/qkvyujcc-the-encoder/pen/KKLdbwm) |
|  55  | Sana | [Codepen](https://codepen.io/-Chouno/pen/Yzbydbq) |
|  56  | 黛西 | [Codepen](https://codepen.io/ChiashengLin/pen/bGyEGqP) |
|  57  | 阿若 | [Codepen](https://codepen.io/skar5268/pen/yLWeJMY) |
|  58  | Linfe | [Codepen](https://codepen.io/Linfe/pen/eYaJrZe) |
|  59  | Anna  | [Codepen](https://codepen.io/Anna-Teng/pen/VwOeGGZ)|
| 60 | Chloe | [Codepen](https://codepen.io/ChloeTseng1026/pen/zYQrXwj)|
|  61  | Casey | [Codepen](https://codepen.io/Caseyyyyyyyyyyyyyy/pen/ExzPzda) |
|  62  | sunknight_002 | [Codepen](https://codepen.io/aqortatm-the-solid/pen/dyEMEOy) |
| 63 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/xxNVNKm) |
| 64 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/yLWJKLG?editors=1010) |
| 65 | Aasta | [Codepen](https://codepen.io/Aasta-the-typescripter/pen/dyEXjoX?editors=1100) |
| 66 | flyincatman5487 | [Codepen](https://codepen.io/ysklpokt-the-looper/pen/YzbGewM?editors=1100) |
| 67 | Shen | [Codepen](https://codepen.io/yan-Shen-the-decoder/pen/RwmGmam) |
| 68 | jimmy.0706 | [Codepen](https://codepen.io/JimmyMao/pen/abrBKOV) |
| 69 | Eddiesun0526 | [Codepen](https://codepen.io/Eddie0526/pen/QWRGZLw)
| 70 | tzhengliin(子恆) | [Codepen](https://codepen.io/tzhengliin/pen/OJYbezm)
| 71 | haojing | [Codepen](https://codepen.io/hjxu/pen/jOoymzr?editors=1010)
| 72 | Frank Chiang | [Codepen](https://codepen.io/frankchiang/pen/xxNqxrm)
|  73  | maruko1105 | [Codepen](https://codepen.io/marukox1105/pen/VwOpbRV) |
|  74  | emmayo | [Codepen](https://codepen.io/emmayo/pen/RwmpZNG) |
|  75  | Anais77 | [Codepen](https://codepen.io/liu-anais/pen/GRamVBW) |
|  76  | Taiwanno1 | [Codepen](https://codepen.io/uhnxswdq-the-typescripter/pen/zYQdaVr?editors=1100) |
|  77  | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/vYweqGJ?editors=1100) |
|  78  | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/GRaOjZz) |
|  79  | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/WNBMgoP) |
| 80 | ChrisLin | [Codepen](https://codepen.io/vllzfzco-the-reactor/pen/MWdVgrm) |

<!--
|  num  | user | [Codepen]() |
-- >

