---
tags: 30 天軟體工程師體驗營｜2025
---
> 建議觀看的影音章節：
> - RWD - 伸縮自如的 RWD 排版術
>
# 🏅 切版任務 Day16 - RWD 練習 I
請先觀看「RWD - 伸縮自如的 RWD 排版術」影音章節，在來完成此作業。
## 題目
複製此 [CodePen 模板](https://codepen.io/yen-kg/pen/ByyoNxx)，用 CodePen 練習以下 RWD 畫面
請同學將 CSS 內有「`...`」部分替換成 CSS 語法，練習將以下版型在**桌機尺寸時設為四個一排**，**平板尺寸時設定為兩個一排**，在**手機尺寸時設定為一個一排**，如圖所示：
>桌機尺寸時設為四個一排


>平板尺寸時設定為兩個一排 (768px 或是 992px)


>手機尺寸時設定為一個一排 (575px)


## 回報流程

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


<!--

解答：
*,*::before,*::after {
box-sizing: border-box;
}

img {
max-width: 100%;
height: auto;
}

.container {
max-width: 1296px;
margin: 0 auto;
}

.card {
display: flex;
flex-wrap: wrap;
}

.card-item {
width: 25%;
}

@media (max-width: 768px) {
.card-item {
width: 50%;
}
.container {
max-width: 696px;
}
}
@media (max-width: 576px) {
.card-item {
width: 100%;
}
.container {
max-width: 348px;
}
}

-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/ZYYZVNZ) |
| 2 | 随縁 | [Codepen](https://codepen.io/zuien/pen/gbbyqPo) |
| 3 | dean | [Codepen](https://codepen.io/ch933114/pen/raabPya) |
| 4 | 所有人 | [Codepen](https://codepen.io/ypfttckg-the-looper/pen/WbbWPva) |
| 5 | Aoi | [Codepen](https://codepen.io/zching07/pen/bNNJzXP?editors=1100) |
| 6 | B | [Codepen](https://codepen.io/Babel777/pen/RNNOdNe) |
| 7 | pastor | [Codepen](https://codepen.io/peter_hung/pen/zxxXbGz) |
| 8 | Ataya | [Codepen](https://codepen.io/zin-seven/pen/PwwgLPg) |
| 9 | 7Lun | [Day16-Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/vEEMPGQ) |
| 10 | Min | [Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/oggOVLy) |
| 11 | akkk | [Codepen](https://codepen.io/ak-wu-the-decoder/pen/XJJQGKg) |
| 12 | Daniel Huang | [Codepen](https://codepen.io/Hou-Chieh-HUANG/pen/myygorv) |
| 13 | ying | [Codepen](https://codepen.io/Lara-Lin/pen/EaaJrXK) |
|14|Saika|[Codepen](https://codepen.io/saika4501/pen/KwwYJjp)|
| 14 | Hank_08123 | [Codepen](https://codepen.io/hankyang1213/pen/myygoPv) |
| 15 | 謝天 | [Codepen](https://codepen.io/crisxie/pen/RNNOdqX) |
| 16 | 林明德 | [Codepen](https://codepen.io/lwescocn-the-vuer/pen/MYYRRgQ) |
| 17 | Chia__ | [Codepen](https://codepen.io/Chia-the-encoder/pen/myygoYd) |
| 18 | BaLaLaYOU | [Codepen](https://codepen.io/bashawxd-the-bashful/pen/WbbWWRZ?editors=1100) |
| 19 | Leo | [Codepen](https://codepen.io/UtanTseng/pen/dPPLLzP)|
| 20 | 登登登 | [Codepen](https://codepen.io/Duncanin/pen/azzxxpM)|
| 21 | Joseph_Kyuu | [Codepen](https://codepen.io/zrzfastd-the-reactor/pen/OPPGGez) |
| 22 | Klaus Chen | [Codepen](https://codepen.io/Klaus-Chen/pen/JooVVOg) |
|23|小趴|[Codepen](https://codepen.io/papa2415/pen/abrORey)|
| 24 | andy | [Codepen](https://codepen.io/ewnblckz-the-styleful/pen/myygoab) |
| 25 | Melanie | [Codepen](https://codepen.io/pnrcspte-the-animator/pen/azzxrZd?editors=1100) |
| 26 | 馬德 | [Codepen](https://codepen.io/maywang/pen/NPPmVZQ?editors=0012) |
| 27 | RUDY | [Codepen](https://codepen.io/Rudy-crw/pen/JooVgRV?editors=1100) |
| 28 | nora_zizi | [Codepen](https://codepen.io/Nora-Ch/pen/ByyEXoL) |
| 29 | Owen He | [Codepen](https://codepen.io/owen1120/pen/vEEwBGZ) |
| 30 | DD | [Codepen](https://codepen.io/dorihung/pen/jEEoEYZ) |
| 31 | jingle0900 | [Codepen](https://codepen.io/EvaLi0472/pen/dPPEGYB) |
| 32 | WEIWEI | [Codepen](https://codepen.io/weiwei93/pen/YPPaGEN) |
| 33 | WAWATA | [Codepen](https://codepen.io/wa-wa-GNOHC-WA-Wa/pen/emmaZpw) |
| 34 | ggininder | [Codepen](https://codepen.io/wei900221/pen/YPPbqwZ) |
|35|蛋殼|[Codepen](https://codepen.io/weybrian/pen/dPPEXpK)|
| 36 | stone | [Codepen](https://codepen.io/bgrwlzoz-the-reactor/pen/GggLeyb)|
| 37 | 柔術小子 | [Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/yyyWOgW?editors=1100)|
| 38 | carrie0416 | [Codepen](https://hackmd.io/o2CF8joKQuycb_j1DDCNVw) |
| 39 | allen3290 | [Codepen](https://codepen.io/udadkudw-the-looper/pen/OPPYWMG) |
| 40 | Holly | [Codepen](https://codepen.io/LEE-HOLLY/pen/EaazNJZ) |
| 41 | Cyan66 | [Codepen](https://codepen.io/Cyan66/pen/YPPbNyv) |
| 42 | mercury2508. | [Codepen](https://codepen.io/Mercury2508/pen/MYYdJJj) |
| 43 | William Hsieh | [Codepen](https://codepen.io/lsaimqxa-the-vuer/pen/LEEoWbo?editors=1100) |
| 44 | HawkeyeLin | [Codepen](https://codepen.io/long-long/pen/OPPYWwJ) |
| 45 | Aidd. | [Codepen](https://codepen.io/aiddchen/pen/NPPVjKM) |
| 46 | Hugh | [Codepen](https://codepen.io/Hugh-Chen/pen/vEEwmNx) |
| 47 | yang |[codepen](https://codepen.io/Yang-J/pen/gbbJWQj?editors=1100)|
| 48 | bill0530 | [Codepen](https://codepen.io/rexvfzmf-the-typescripter/pen/PwwvmLy) |
| 49 | Leonard | [Codepen](https://codepen.io/hyyfjqra-the-sans/pen/raagYaM?editors=1100) |
| 50 | Jane | [Codepen](https://codepen.io/jkmx/pen/jEEoZeo) |
| 51 | tina01170 | [Codepen](https://codepen.io/tina-huang-the-bashful/pen/dPPEemy) |
| 52 | 力文 | [Codepen](https://codepen.io/liwenchiou/pen/raagrVM?editors=1100) |
|53|JHT|[Codepen](https://codepen.io/juanht/pen/zxxXVyj)|
| 54 | An | [Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/XJJwOmL?editors=1100) |
| 55 | cks40660 | [Codepen](https://codepen.io/CKS40660/pen/ByyeMdx) |
| 56 | Chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/emmwmLL?editors=1100) |
| 57 | 消波塊 | [Codepen](https://codepen.io/PaulHsiao/pen/OPPeNpO) |
| 58 | BL | [Codepen](https://codepen.io/bonnieli1414/pen/bNNPwwe?editors=1100) |
| 59 | wei_0982 | [Codepen](https://codepen.io/nico-lai/pen/NPPVNwe) |
| 60 | Michael - 鴿子 | [CodePen](https://codepen.io/KeinSacer_Michael/pen/LEEvKwa)|
| 61 | ja4071 | [CodePen](https://codepen.io/SHAO-L/pen/gbbVBZx)|
| 62 | oyll | [CodePen](https://codepen.io/dizzydog-rgb/pen/WbveXOY?editors=1100)|
| 63 | kelsonhouse | [Codepen](https://codepen.io/Kelson-House/pen/jEPNjWp) |
| 64 | haohaoliao | [Codepen](https://codepen.io/tqdtaouh-the-styleful/pen/ByNaoJx?editors=1100) |
| 65 | Tung | [Codepen](https://codepen.io/oltsegon-the-looper/pen/jEPOZzL) |
| 66 | 叮咚 | [Codepen](https://codepen.io/pinchieh-lin/pen/KwpwEbx) |
| 67 | Jessie_Yu | [Jessie_Yu 的 Codepen](https://codepen.io/bakyfkso-the-looper/pen/JodGjKZ)|
| 68 | kent_31665 | [Codepen](https://codepen.io/kentlee406/pen/ZYGQeaV) |
| 69 | vima | [Codepen](https://codepen.io/chin7004/pen/MYwybVg) |
| 70 | Michelle | [Codepen](https://codepen.io/bastar_dize/pen/EajyoLO?editors=1100) |
| 71 | Lynn | [Codepen](https://codepen.io/Yen-Ling-Peng/pen/NPqrJYQ?editors=1100) |
| 72 | 禹成林 | [Codepen](https://codepen.io/useirin/pen/MYwJWjx) |
| 73 | Astrid | [6/6](https://codepen.io/astrid321654/pen/emNRdKO?editors=1100) |
| 74 | ann.328 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/azOEWQz) |
| 75 | JiaMori | [Codepen](https://codepen.io/jiamori/pen/OPVEqWX) |
| 76 | Rogan | [Codepen](https://codepen.io/RoganHsu/pen/LEVBbwg) |

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