---
tags: 30 天軟體工程師體驗營｜2025
---
> 建議觀看的影音章節：
> - RWD - 伸縮自如的 RWD 排版術

# 🏅 切版任務 Day17 - RWD 運用

## 題目
複製此 [CodePen 模板](https://codepen.io/yen-kg/pen/JooYdmK)，使其在瀏覽器寬度 576px 以下時呈現以下畫面：

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

## 回報流程

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


<!--

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

-->

回報區
---
| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 | pastor | [Codepen](https://codepen.io/peter_hung/pen/XJJwqyO)|
| 2 | Daniel Huang | [Codepen](https://codepen.io/Hou-Chieh-HUANG/pen/myyYLar)|
| 3 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/gbbJzxr?editors=1100)|
| 4 | dean | [Codepen](https://codepen.io/ch933114/pen/wBBbXpx?editors=1100)|
| 5 | Ataya | [Codepen](https://codepen.io/zin-seven/pen/JooqZvR)|
| 6 | 随縁 | [Codepen](https://codepen.io/zuien/pen/JooqZLR)|
| 7 | Owen He | [Codepen](https://codepen.io/owen1120/pen/emmaKPN?editors=1100)|
|8| Saika| [Codepen ](https://codepen.io/saika4501/pen/zxxQaXB)|
| 9 | RUDY | [Codepen](https://codepen.io/Rudy-crw/pen/gbbJzZg?editors=1100)|
| 10 | andy | [Codepen](https://codepen.io/ewnblckz-the-styleful/pen/PwwvBQr)|
| 11 | ying | [Codepen](https://codepen.io/Lara-Lin/pen/dPPEKGX)|
| 12 | Aoi | [Codepen](https://codepen.io/zching07/pen/MYYdBKK)|
| 13 | 力文 | [Codepen](https://codepen.io/liwenchiou/pen/WbbBgwR?editors=1100)|
| 14 | 所有人 | [Codepen](https://codepen.io/ypfttckg-the-looper/pen/ByyeVRx)|
| 15 | stone | [Codepen](https://codepen.io/bgrwlzoz-the-reactor/pen/EaazRPY)|
| 16 | Joseph_Kyuu | [Codepen](https://codepen.io/zrzfastd-the-reactor/pen/ZYYNjBp)|
| 17 | akkk | [Codepen](https://codepen.io/ak-wu-the-decoder/pen/KwwLxeQ)|
| 18 | 登登登 | [Codepen](https://codepen.io/Duncanin/pen/MYYdqEG)|
| 19 | Kath | [Codepen](https://codepen.io/JLin-the-lessful/pen/QwwRZXX)|
| 20 | Melanie | [Codepen](https://codepen.io/pnrcspte-the-animator/pen/JooqmXd)|
| 21 | B | [Codepen](https://codepen.io/Babel777/pen/wBBbYGy)|
| 22 | Klaus Chen | [Codepen](https://codepen.io/Klaus-Chen/pen/PwwvdKz?editors=1100)|
| 23 | Hank_08123 | [Codepen](https://codepen.io/hankyang1213/pen/vEEwreJ)|
| 24 | WAWATA | [Codepen](https://codepen.io/wa-wa-GNOHC-WA-Wa/pen/qEEGwJe)|
| 25 | cks40660 | [Codepen](https://codepen.io/CKS40660/pen/PwwvVVB?editors=1100)|
| 26 | An | [Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/WbbBPJL?editors=1100) |
| 27 | 謝天 | [Codepen](https://codepen.io/crisxie/pen/XJJwYrw) |
| 28 | Min | [Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/QwwReem?editors=1100) |
| 29 | Aidd. | [Codepen](https://codepen.io/aiddchen/pen/YPPbomg) |
| 30 | nora_zizi| [Codepen](https://codepen.io/Nora-Ch/pen/EaazBwv) |
| 31 | 柔術小子| [Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/bNNyJWg) |
| 32 | allen3290| [Codepen](https://codepen.io/udadkudw-the-looper/pen/VYYJLWm) |
| 33 | WEIWEI | [Codepen](https://codepen.io/weiwei93/pen/PwwRGyR) |
| 34 | 馬德 | [Codepen](https://codepen.io/maywang/pen/EaaBYxB?editors=1100) |
| 35 | 7Lun | [Day17-Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/myyZyOd) |
| 36 | jingle0900 | [Codepen](https://codepen.io/EvaLi0472/pen/OPPeVZZ?editors=1100) |
| 37 | Chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/dPPBoQW?editors=0100) |
| 38 | 消波塊 | [Codepen](https://codepen.io/PaulHsiao/pen/Byygzov) |
|39|JHT|[Codepen](https://codepen.io/juanht/pen/gbbNbKM)|
|40|蛋殼|[Codepen](https://codepen.io/weybrian/pen/raaEWLb)
|41|Leonard|[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/vEEqxLw?editors=1100)
| 42 | Cyan66 | [Codepen](https://codepen.io/Cyan66/pen/qEEzRLY) |
| 43 | BL | [Codepen](https://codepen.io/bonnieli1414/pen/WbbqpxG?editors=0100) |
| 44 | holysi | [Codepen](https://codepen.io/holysi/pen/emmwRRz) |
| 45 | kururu110 | [Codepen](https://codepen.io/ecqyjuck-the-decoder/pen/KwwjmBJ) |
| 46 | William Hsieh | [Codepen](https://codepen.io/lsaimqxa-the-vuer/pen/LEEKLBd?editors=1100) |
| 47 | Tetsu | [Codepen](https://codepen.io/ttgchang/pen/MYYRQbg) |
| 48 | bill0530 | [Codepen](https://codepen.io/rexvfzmf-the-typescripter/pen/JooQyyw) |
| 49 | Hugh | [Codepen](https://codepen.io/Hugh-Chen/pen/qEEzjgY?editors=1100) |
| 50 | HawkeyeLin | [Codepen](https://codepen.io/long-long/pen/QwwXqpx) |
| 51 | NAOJUN | [Codepen](https://codepen.io/pzzpvwwp-the-styleful/pen/WbbqOPQ?editors=1100) |
|52|小趴|[Codepen](https://codepen.io/papa2415/pen/MWdaepb)|
| 53 | mercury2508. | [Codepen](https://codepen.io/Mercury2508/pen/raaEZjp) |
| 54 | DD | [Codepen](https://codepen.io/dorihung/pen/oggrPYJ) |
| 55 | Michael - 鴿子 | [CodePen](https://codepen.io/KeinSacer_Michael/pen/ZYYdLXO)|
| 56 | Chia__ | [Codepen](https://codepen.io/Chia-the-encoder/pen/YPPbdZK) |
| 57 | Jane | [Codepen](https://codepen.io/jkmx/pen/myyYXvL) |
| 58 | wei_0982 | [Codepen](https://codepen.io/nico-lai/pen/oggrmdL) |
| 59 | yang |[codepen](https://codepen.io/Yang-J/pen/yyymdxy?editors=1100)|
| 60 | oyll |[codepen](https://codepen.io/dizzydog-rgb/pen/NPqKwQV?editors=0100)|
| 61 | ja4071 |[codepen](https://codepen.io/SHAO-L/pen/JodPyrL)|
| 62 | haohaoliao | [Codepen](https://codepen.io/tqdtaouh-the-styleful/pen/emNYpbm?editors=1100) |
| 63 | kelsonhouse|[Codepen](https://codepen.io/Kelson-House/pen/LEVYLdZ?editors=1100)|
| 64 | tina01170 | [Codepen](https://codepen.io/tina-huang-the-bashful/pen/myJyOLb) |
| 65 | Jessie_Yu | [Jessie_Yu 的 Codepen](https://codepen.io/bakyfkso-the-looper/pen/emNJYQr)|
| 66 | kent_31665 | [Codepen](https://codepen.io/kentlee406/pen/JodGWpo?editors=1100)|
| 67 | Lynn | [Codepen](https://codepen.io/Yen-Ling-Peng/pen/KwpMYwg?editors=1100) |
| 68 | 禹成林 | [Codepen](http://codepen.io/useirin/pen/ZYGLYzb) |
| 69 | 叮咚 | [Codepen](https://codepen.io/pinchieh-lin/pen/LEVqjPe) |

<!--【快速複製】
| num | user | [Codepen]() |
-- >