---
# System prepended metadata

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

---

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

# 🏅 切版任務 Day16 - 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 | Berlin#7338 | [Codepen](https://codepen.io/3qberlin/pen/jOeewKd) |
| 2 | Joi#4089 | [Codepen](https://codepen.io/Joi-Chen/pen/LYggLqW)
| 3 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/OJBBgqw) |
| 4 | DeLi#8324 | [Codepen](https://codepen.io/delichaomoon/pen/PoyyKNx)|
| 5 | jia yu#8896 | [Codepen](https://codepen.io/fjqxaznl-the-reactor/pen/yLRRopO)|
| 6 | しあわせね##0036| [Codepen](https://codepen.io/Front-end-engineer/pen/Exddvov)|
| 7 | Eero#1147| [Codepen](https://codepen.io/Eero-Chiao/pen/rNqqzKm)|
| 8 | 史滴芬#4310| [Codepen](https://codepen.io/steven870107/pen/bGmmrvb)|
| 9 | Tami#6742 | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/GRYYvQz) |
| 10 | 杰_jie#9088 | [Codepen](https://codepen.io/hmj8805/pen/YzJJxjJ?editors=1100) |
| 11 | Jacky7035#9423 | [Codepen](https://codepen.io/adens123/pen/zYmmdgR) |
| 12 | JimWang#6134 | [Codepen](https://codepen.io/Jim-Wang-the-selector/pen/poxxWve) |
| 13 | Ting.66#0912 | [Codepen](https://codepen.io/Ting66/pen/mdzzMPj?editors=1100)|
| 13 | satarkuo#5736 | [Codepen](https://codepen.io/SatarKuo/pen/YzJJryM)|
| 14 | Ann Chou#0146 | [Codepen](https://codepen.io/annchou_illu/pen/wvYYrGG)|
| 15 | 依依#6306 | [Codepen](https://codepen.io/Rita-Yang/pen/NWOOaRR)|
| 16 | 鄭舜仁#6606 | [Codepen](https://codepen.io/randomno/pen/JjmmrYa)|
| 17 | Snadra#1987 | [Codepen](https://codepen.io/mlqmhltg/pen/WNaaZXj)|
| 18 | CuraLin#2648 | [Codepen](https://codepen.io/curalin/pen/YzJJraz)|
| 19 | Döng#2328 | [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/yLRRzpp)|
| 20 | DyH#0526 | [Codepen](https://codepen.io/dorihung/pen/poxxWVp)|
| 21 | judy123#2363 | [Codepen](https://codepen.io/hsuantsong/pen/ZEqqXMj)|
| 22 | ChaosTu#9311 | [Codepen](https://codepen.io/torotu/pen/vYVVeWY?editors=1100)|
| 23 | Lychee KK  | [Codepen](https://codepen.io/kakakala/pen/NWOOaJa)|
| 24 | HsienLu#8316 | [Codepen](https://codepen.io/Hsienlu/pen/KKGGXEo)|
| 25 | Ataraxia#9977 | [Codepen](https://codepen.io/ataraxia8888/pen/abRwXvX)|
|26| Quantum#6093|[Codepen](https://codepen.io/Min-Hao-Hung/pen/ZEqqazm)|
| 27 | Daisy_Li#4231 | [Codepen](https://codepen.io/lidairong-gmail-com/pen/rNqqYmE)|
| 28 | Bruce-Lee#0629 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/xxyyPPw)|
| 29 | 辣椒#1002| [Codepen](https://codepen.io/chilichen118/pen/yLRRPKr) |
| 30 | PoWei#8484| [Codepen](https://codepen.io/pen/?editors=0010) |
| 31 | Uli#1946| [Codepen](https://codepen.io/uli1313/pen/poxxpoz) |
| 32 | betty#0693| [Codepen](https://codepen.io/betty-hu/pen/xxyypLL) |
| 33 | 翔.#0859| [Codepen](https://codepen.io/energy95272z/pen/poxxpmN?editors=1000)|
| 34 | jelly77#2088| [Codepen](https://codepen.io/Ming-chiang/pen/zYmmRYR?editors=1010)|
|35|汪汪#4486|[Codepen](https://codepen.io/hunwooooof/pen/vYVVdxo)|
|36| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/wvYYybe) |
| 37 | 銀光菇#1692 | [Codepen](https://codepen.io/genesynthesis/pen/yLRRvzP) |
| 38 | David0799#4415 | [Codepen](https://codepen.io/David0799/pen/RweeMjg) |
| 39 | Rayo#8002 | [Codepen](https://codepen.io/loborayo/pen/VwEEQgY) |
| 39 | 魚翅#3100 | [Codepen](https://codepen.io/Fukahire/pen/jOeexMN) |
| 40 | Kulimusoda#2785 | [Codepen](https://codepen.io/yuch3n_chen/pen/gOBBzqJ?editors=1100) |
| 41 | Kaya#8857 | [Codepen](https://codepen.io/laron9486/pen/WNaaJVw) |
| 42 | Akira#9996 | [Codepen](https://codepen.io/Akira-Chen/pen/RweeJZw) |
| 43 | homer#1525 | [Codepen](https://codepen.io/Buckhorn/pen/QWZZBpB) |
| 44 | henrykgb#5749 | [Codepen](https://codepen.io/henrymorgan666/pen/OJBBwew) |
| 45 | 姜承#8204 | [Codepen](https://codepen.io/Troy0718/pen/MWPPqYW) |
| 46 | HsuanTang#1349 | [Codepen](https://codepen.io/HsuanTang/pen/yLRRxyB) |
|47|wiimax#4564|[Codepen](https://codepen.io/willismax/pen/LYggJRz?editors=1000)
|48|變羊魔法#6372|[Codepen](https://codepen.io/cssf998811/pen/PoyydXr)|
|49|K（アギルダー）#0386|[Codepen](https://codepen.io/klay376014/pen/eYPPPgy)|
| 50 | Maxine#9061 |[Codepen](https://codepen.io/Maxine_Liao/pen/poxxxwr)|
| 51 | N0c7iluc3n7#4390 |[Codepen](https://codepen.io/huang-yu-cheng/pen/qBJJJLz)|
| 52 | Janet#5784 |[Codepen](https://codepen.io/janetlinnn/pen/GRYYwgN?editors=1010)|
| 53 | jackwu#4437 |[Codepen](https://codepen.io/jackwu1588003/pen/wvYYQXX)|
| 54 | andrew0404#4576 |[Codepen](https://codepen.io/Loonng/pen/yLRRGay)|
| 55 | Hao#2485 |[Codepen](https://codepen.io/Seanfeb16/pen/LYggVzo)|
66|雲漢#5319|[codepen](https://codepen.io/keon981/pen/mdzQbJY?editors=1010)
67|SKey#9905|[codepen](https://codepen.io/Dale-Chien/pen/dygQbab)
68|泊岸#3466|[codepen](https://codepen.io/qoq77416416/pen/VwEVwgb?editors=1000)
69|alan0305#2423|[codepen](https://codepen.io/alan0305/pen/Poyxwby)
| 70  | Tina02#2691          | [codepen](https://codepen.io/riifwerr-the-selector/pen/qBJQEXX)             |
| --- | -------------------- | --------------------------------------------------------------------------- |
| 71  | moins13#3346         | [codepen](https://codepen.io/kyechen13/pen/yLRQyRO)                         |
| 72  | FiReBrO#0557         | [codepen](https://codepen.io/firebro42/pen/bGmQVWa)                         |
| 73  | 肉個阿倫#7172        | [Codepen](https://codepen.io/i9574385/pen/gOBQrep)                          |
| 74  | Jennifer Chuang#3937 | [Codepen](https://codepen.io/yujhen/pen/xxyQEqq)                            |
| 75  | yoyo#1003            | [Codepen](https://codepen.io/pen/dygQOZr)                                   |
| 76  | Yvonne#2721          | [Codepen](https://codepen.io/Evonne/pen/abRRRBj)                            |
| 77  | 吳偉雄恩#2256        | [Codepen](https://codepen.io/Bamboo1212/pen/rNqQydM)                        |
| 78  | 兔子#6746            | [Codepen](https://codepen.io/CarrotDetector/pen/mdzQLmL)                    |
| 79  | wendyli#2155         | [Codepen](https://codepen.io/rockayumitw/pen/qBJQQYd)                       |
| 80  | jimhop#6510          | [Codepen](https://codepen.io/jimsansssss/pen/MWPzMVz)                       |
| 81  | liam9930#4129        | [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/bGmObme?editors=1100) |
| 82  | 黑白兔#0684          | [Codepen](https://codepen.io/johnny329/pen/GRYPoJO)                         |
| 83  | alll6z#9204          | [Codepen](https://codepen.io/A6Z/pen/GRYPZOb)                               |
| 84  | 冷曄#9378            | [Codepen](https://codepen.io/HgHale/pen/mdzarbw)                            |
| 85  | Elma#4317            | [codepan](https://codepen.io/4317/pen/bGmOqwx)                              |
| 86  | Sonia Wu#7154        | [codepan](https://codepen.io/YUJOU/pen/PoyXdgy)                             |
| 87  | bonnieli1414#4906    | [codepan](https://codepen.io/bonnieli1414/pen/WNaPNXE?editors=0010)         |
| 88  | jun777#2468          | [codepan](https://codepen.io/js18151102/pen/oNamLVg?editors=1000)           |
| 89  | 鉦勝#8333            | [codepan](https://codepen.io/atckmax823/pen/rNqQEYP)                        |
| 90  | weiting#3489         | [codepan](https://codepen.io/weiting14/pen/yLRZjJQ?editors=1100)            |
| 91  | 長方形#9612          | [codepan](https://codepen.io/imjjw/pen/yLRZEKO)                             |
| 92  | Lainie#1931          | [codepan](https://codepen.io/Lainie88/pen/wvYRKMg)                          |
| 93  | JasonChang#7847      | [codepan](https://codepen.io/jsonChangJava/pen/xxyBGGR)                     |
| 94  | 小魚#8614            | [codepan](https://codepen.io/gizelliang/pen/XWxGdMK)                        |
| 95  | 東東#5015            | [Codepen](https://codepen.io/wearymask/pen/YzJgGNq)                         |
| 96  | 羽毛#5463            | [Codepen](https://codepen.io/KYuFeather/pen/ZEqPxgR)                        |
| 97  | penny#6214           | [Codepen](https://codepen.io/penny8989/pen/QWZoYKo)                         |
| 98  | townyuan#2653        | [Codepen](https://codepen.io/townyuan/pen/ExdMMLR)                          |
| 99  | 歐陽龍龍#1061        | [Codepen](https://codepen.io/dizzydog-rgb/pen/PoygqEd)                      |
| 100 | Celia#1715           | [Codepen](https://codepen.io/drdrvpgf-the-bashful/pen/BaqeBzY)              |
| 101 | JhouHank#8132        | [Codepen](https://codepen.io/JhouHank/pen/WNaBeML)                          |
| 102 | 小明#4408            | [Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/ZEqNEJB)              |
| 103 | 喬喬#2824            | [Codepen](https://codepen.io/joanne-wei/pen/KKGLEPj)                        |
| 104 | FanJJ#8061           | [Codepen](https://codepen.io/yfchenn/pen/rNqEvrd)                           |
| 105 | NathanJames#8120     | [Codepen](https://codepen.io/ufo060204/pen/LYgKrxY)                         |
| 106 | Jaredlee#5887        | [Codepen](https://codepen.io/jared-lee/pen/abRgQXw)                         |
| 107 | 阿榮#8277            | [Codepen](https://codepen.io/codeitaday/pen/qBJeqGO?editors=0100)           |
| 108 | +7#8492              | [Codepen](https://codepen.io/tojibom/pen/wvQwGoz)                           |
| 109 | lishuan#3698         | [Codepen](https://codepen.io/lishuan/pen/NWEWONq)                           |
| 110 | 初心#9021            | [Codepen](https://codepen.io/Sylviax/pen/abQzMQg?editors=1000)              |
| 111 | pss940909#8650       |            [Codepen](https://codepen.io/pss940909/pen/rNQVpPV)                         |
| 112 | 慢慢來#4035       |            [Codepen](https://codepen.io/kikiyang/pen/PoxZwxJ?editors=1000)                         |