---
# System prepended metadata

title: "\U0001F3C5 切版任務 Day17 - RWD 運用"
tags: [軟體工程師體驗營 - 2023]

---

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

# 🏅 切版任務 Day17 - RWD 運用

## 題目 

沿用 Day10 的 flex 切版練習，
使其在瀏覽器寬度 576px 以下時呈現以下畫面：

<img src="https://i.imgur.com/Qb3pujv.png" width="350">

## 回報流程

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

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

<!-- 

解答：
https://codepen.io/hexschool/pen/yLRLayj

-->


回報區
---

| 報數 | Discord 名字  |  Codepen／其他回饋                                                         |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 | Ann Chou#0146 | [Codepen](https://codepen.io/annchou_illu/pen/GRYwKPo) |
| 2 | Tami#6742 | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/wvYQwOJ) |
| 3 | 銀光菇#1692 | [Codepen](https://codepen.io/genesynthesis/pen/eYPQYzb) |
4|雲漢#5319|[codepen](https://codepen.io/keon981/pen/BaqrgvK?editors=1100)
| 4   | 史滴芬#4310          | [Codepen](https://codepen.io/steven870107/pen/oNaqmLZ)                       |
| 5   | JimWang#6134         | [Codepen](https://codepen.io/Jim-Wang-the-selector/pen/xxyQxKN?editors=1100) |
| 6   | Lychee KK            | [Codepen](https://codepen.io/kakakala/pen/GRYwRxv)                           |
| 7   | 汪汪#4486            | [Codepen](https://codepen.io/hunwooooof/pen/yLRQLRr)                         |
| 8   | Snadra#1987          | [Codepen](https://codepen.io/mlqmhltg/pen/QWZJWVZ)                           |
| 9   | Kulimusoda#2785      | [Codepen](https://codepen.io/yuch3n_chen/pen/JjmejxK)                        |
| 10  | Uli#1946             | [Codepen](https://codepen.io/uli1313/pen/KKGrwZw)                            |
| 11  | 冬天#5215            | [Codepen](https://codepen.io/winter_/pen/LYgXEbj)                            |
| 12  | judy123#2363         | [Codepen](https://codepen.io/hsuantsong/pen/abRQzyJ?editors=1100)            |
| 13  | 魚翅#3100            | [Codepen](https://codepen.io/Fukahire/pen/oNayzJN)                           |
| 14  | peihsuan#6315        | [Codepen](https://codepen.io/peihsuanlai/pen/zYmMYyx)                        |
| 15  | Quantum#6093         | [Codepen](https://codepen.io/Min-Hao-Hung/pen/Jjmeovr)                       |
| 16  | Tina02#2691          | [codepen](https://codepen.io/riifwerr-the-selector/pen/VwEVYOE)              |
| 17  | Berlin#7338          | [codepen](https://codepen.io/3qberlin/pen/ExdOYLd?editors=1100)              |
| 18  | 陳庭#3529            | [codepen](https://codepen.io/yuting850309/pen/RweyLZj?editors=1100)          |
| 19  | Jacky7035#9423       | [codepen](https://codepen.io/adens123/pen/RweMvpx)                           |
| 20  | K（アギルダー）#0386 | [codepen](https://codepen.io/klay376014/pen/abRQOvY)                         |
| 21  | gahwa#3562           | [codepen](https://codepen.io/gahwa17/pen/RweqPGm)                            |
| 22  | ChaosTu#9311         | [codepen](https://codepen.io/torotu/pen/xxyQGEz?editors=1100)                |
| 23  | しあわせね#0036      | [codepen](https://codepen.io/Front-end-engineer/pen/ExdOxdj?editors=1100)    |
| 24  | jia yu#8896          | [codepen](https://codepen.io/fjqxaznl-the-reactor/pen/OJBaVXP?editors=1100)  |
| 25  | 翔.#0859             | [codepen](https://codepen.io/energy95272z/pen/jOeQbEZ)                       |
| 26  | Ataraxia#9977        | [codepen](https://codepen.io/ataraxia8888/pen/wvYmMqp)                       |
| 27  | henrykgb#5749        | [codepen](https://codepen.io/henrymorgan666/pen/rNqQOxo)                     |
| 28  | 依依#6306            | [codepen](https://codepen.io/Rita-Yang/pen/KKGxNRe?editors=1100)             |
| 29  | alan0350#2423        | [codepen](https://codepen.io/alan0305/pen/zYmMxNK)                           |
| 30  | Rochel#4754          | [codepen](https://codepen.io/rochelwang1205/pen/BaqGNwj?editors=1100)        |
| 31  | vvay#4113            | [codepen](https://codepen.io/pellmssx-the-sasster/pen/VwEXgOd)               |
| 32  | FiReBrO#0557         | [codepen](https://codepen.io/firebro42/pen/ExdOVQY)                          |
| 33  | Hao#2485             | [codepen](https://codepen.io/Seanfeb16/pen/ZEqmGXv)                          |
| 33  | Kaya#8857            | [Codepen](https://codepen.io/laron9486/pen/ExdOVRx)                          |
| 35  | Döng#2328            | [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/oNaQjmY?editors=1100)  |
| 36  | Daisy_Li#4231        | [Codepen](https://codepen.io/lidairong-gmail-com/pen/mdzQerO)                |
| 37  | N0c7iluc3n7#4390     | [Codepen](https://codepen.io/huang-yu-cheng/pen/QWZJyMe)                     |
| 38  | satarkuo#5736        | [Codepen](https://codepen.io/SatarKuo/pen/wvYQGMa?editors=1100)              |
|39|肉個阿倫#7172|[Codepen](https://codepen.io/i9574385/pen/abRQNRQ)|
|40|jackwu#4437|[Codepen](https://codepen.io/jackwu1588003/pen/OJBaXoQ)|
|41|Tim123#8361|[Codepen](https://codepen.io/Wangtim4/pen/LYgXRdO)|
|42|司機叔叔#2463|[Codepen](https://codepen.io/bigv5566/pen/vYVQyKP)|
|43|Akira#9996|[Codepen](https://codepen.io/Akira-Chen/pen/zYmMoqp)|
|44|Yvonne#2721|[Codepen](https://codepen.io/Evonne/pen/ZEqmLeV)
|45|HsuanTang#1349|[Codepen](https://codepen.io/HsuanTang/pen/ExdOZOa)
|46|Akira#9996|[Codepen](https://codepen.io/Akira-Chen/pen/zYmMoqp)
|47|Yuu#5361|[Codepen](https://codepen.io/alycehwy/pen/zYmMZbz)
|48|吳偉雄恩#2256|[Codepen](https://codepen.io/Bamboo1212/pen/BaqxopB?editors=1100)|
|49|wiimax#4564|[Codepen](https://codepen.io/Akira-Chen/pen/zYmMoqp)|
|50|Janet#5784|[Codepen](https://codepen.io/janetlinnn/pen/LYgXypB)
|51|snow#0255|[Codepen](https://codepen.io/snow21723/pen/gOBQWgY)|
|52|Rayo#8002|[Codepen](https://codepen.io/loborayo/pen/oNaQWRK)|
|53|浪裡小白龍#6860|[Codepen](https://codepen.io/Emillo/pen/zYmMRwR?editors=1100)|
|54|moins13#3346|[Codepen](https://codepen.io/kyechen13/pen/abRQYZx)|
|55|PoWei#8484|[Codepen](https://codepen.io/harrison-wei-lai/pen/XWxYjaB)|
|56|jun777#2468|[Codepen](https://codepen.io/js18151102/pen/GRYwdpQ?editors=1100)|
|57| Rey#1878  | [codepen](https://codepen.io/yfatgmpc-the-bold/pen/GRYwGEV) |
|58|Jennifer Chuang#3937|[Codepen](https://codepen.io/yujhen/pen/Jjmepya)|
|59|wendyli#2155 |[Codepen](https://codepen.io/rockayumitw/pen/NWOEEMY)|
| 60 | 辣椒#1002 |[Codepen](https://codepen.io/chilichen118/pen/zYmMyYx) |
| 61 | 姜承#8204 |[Codepen](https://codepen.io/Troy0718/pen/QWZJReg) |
| 62 | 兔子#6746 |[Codepen](https://codepen.io/CarrotDetector/pen/jOeQeLV) |
| 63 | liam9930#4129 |[Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/vYVvBVq) |
| 64 | Aritan#1931 |[Codepen](https://codepen.io/Aritan/pen/abRPNVY) |
| 65 | alll6z#9204 |[Codepen](https://codepen.io/A6Z/pen/ZEqVWvy) |
| 66 | SKey#9905 |[Codepen](https://codepen.io/Dale-Chien/pen/WNaLxQO) |
| 67 | 黑白兔#0684 |[Codepen](https://codepen.io/johnny329/pen/GRYPrxN) |
| 68 | 冷曄#9378 |[Codepen](https://codepen.io/HgHale/pen/JjmBdBG) |
|69|  Elma#4317|[Codepan](https://codepen.io/4317/pen/rNqoyRL)
|70| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/JjmwrvZ?editors=1100) |
|71| yoyo#1003 | [CodePen](https://codepen.io/crpbugqy-the-typescripter/pen/bGmQBxB) |
|72| David0799#4415 | [CodePen](https://codepen.io/David0799/pen/wvYRgwz) |
|73| jimhop#6510 | [CodePen](https://codepen.io/jimsansssss/pen/ZEqVRYO)|
|74| boki#3717 | [CodePen](https://codepen.io/boki-wang/pen/PoyXeyd)|
|75| andrew0404#4576 | [CodePen](https://codepen.io/Loonng/pen/dygQvWZ?editors=1100)|
|76| betty#0693 | [CodePen](https://codepen.io/betty-hu/pen/jOeeavd?editors=0100)|
|77| DeLi#8324 |[CodePen](https://codepen.io/delichaomoon/details/QWZzPgJ)|
|78| 張金#7225 |[CodePen](https://codepen.io/changxchieh/pen/rNqoYyZ?editors=1100)|
|79| bonnieli1414#4906 |[CodePen](https://codepen.io/bonnieli1414/pen/oNamNOX?editors=1100)|
|80| 鉦勝#8333 |[CodePen](https://codepen.io/atckmax823/pen/OJBwqXE?editors=1100)|
|81| MitA#7407 |[CodePen](https://codepen.io/qaz15996398/pen/bGmzMxx)|
|82| 長方形#9612 |[CodePen](https://codepen.io/imjjw/pen/dygaKjj)|
|83| Ting.66#0912 |[CodePen](https://codepen.io/Ting66/pen/XWxybgE?editors=1100)|
|84| weiting#3489 |[CodePen](https://codepen.io/weiting14/pen/BaqMVpb?editors=1100)|
|85| Lainie#1931 |[CodePen](https://codepen.io/Lainie88/pen/XWxOPwm)|
|86| JasonChang#7847 |[CodePen](https://codepen.io/jsonChangJava/pen/RwedPxB)|
|87| 小魚#8614 |[CodePen](https://codepen.io/gizelliang/pen/BaqbzaB?editors=1100)|
| 88 | Zhong#8917 | [Codepen](https://codepen.io/klfjrlod-the-sasster/pen/qBJvqVX) |
| 89 | Sonia Wu#7154 | [Codepen](https://codepen.io/YUJOU/pen/eYPbLaZ?editors=1100) |
|90|鄭舜仁#6606|[Codepen](https://codepen.io/randomno/pen/bGmZQxw)|
|91|penny#6214|[Codepen](https://codepen.io/penny8989/pen/PoyLVWa?editors=1100)|
|92|townyuan#2653|[Codepen](https://codepen.io/townyuan/pen/yLRwrzx)|
|92|歐陽龍龍#1061|[Codepen](https://codepen.io/dizzydog-rgb/pen/yLRrNGN)|
|93|羽毛#5463|[Codepen](https://codepen.io/KYuFeather/pen/ZEqVYob)|
|94|小華#3204|[Codepen](https://codepen.io/franfranfran/pen/oNaVJwg?editors=1100)|
|95|杰_jie#9088|[Codepen](https://codepen.io/hmj8805/pen/zYmQvww)|
| 96 | 東東#5015 | [Codepen](https://codepen.io/wearymask/pen/gOByOvY) |
| 97 | JhouHank#8132 | [Codepen](https://codepen.io/JhouHank/pen/oNaRezV) |
| 98 | 喬喬#2824 | [Codepen](https://codepen.io/joanne-wei/pen/wvYbOeZ?editors=0100) |
| 99 | NathanJames#8120 | [Codepen](https://codepen.io/ufo060204/pen/QWZXxMm) |
| 100 | FanJJ#8061 | [Codepen](https://codepen.io/yfchenn/pen/XWxLqBq) |
| 101 | 又竹#7302 | [Codepen](https://codepen.io/YO_ZU/pen/GRwKKLr) |
|102|阿榮#8277|[Codepen](https://codepen.io/codeitaday/pen/xxyvqWz?editors=1100)|
|103|lishuan#3698|[Codepen](https://codepen.io/lishuan/pen/KKrwdXR)|
|104|路人ADCB#9851|[Codepen](https://codepen.io/markyourpage/pen/MWzYVWr)|
|105|初心#9021|[Codepen](https://codepen.io/Sylviax/pen/eYQNYXb?editors=1100)|
|106|+7#8492|[Codepen](https://codepen.io/tojibom/pen/PoxPbGd)|
|107|cmlb0212|[Codepen](https://codepen.io/Chungmin0212/pen/NWExWpG?editors=1100)|
|108|慢慢來#4035|[Codepen](https://codepen.io/kikiyang/pen/rNQxyJP?editors=1100)|
|109|小明#4408|[Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/YzRpamY)|
