---
# System prepended metadata

title: "\U0001F3C5 切版任務 Day15 - RWD 練習 I"
tags: [軟體工程師體驗營 - 2024]

---

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

# 🏅 切版任務 Day15 - RWD 練習 I
## 題目 
用 Codepen 練習以下 RWD 畫面 
做出響應式排版：
任務中已提供 HTML 的部分，請同學將 CSS 內有「`...`」部分替換成 CSS 語法，練習將以下版型在**桌機尺寸時設為四個一排**，**平板尺寸時設定為兩個一排**，在**手機尺寸時設定為一個一排**，如圖所示：
>桌機尺寸時設為四個一排

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

>平板尺寸時設定為兩個一排

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

>手機尺寸時設定為一個一排

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


> 需使用 **CSS Reset**

---


### HTML
```htmlembedded=
<div class="container">
  <ul class="card">
    <li class="card-item">
      <img class="card-img" src="https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60">
      <div class="card-body">
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
          content. This content is a little bit longer.</p>
        <small>9 mins</small>
        <button class="card-btn">點我</button>
      </div>
    </li>
    <li class="card-item">
      <img class="card-img" src="https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60">
      <div class="card-body">
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
          content. This content is a little bit longer.</p>
        <small>9 mins</small>
        <button class="card-btn">點我</button>
      </div>
    </li>
    <li class="card-item">
      <img class="card-img" src="https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60">
      <div class="card-body">
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
          content. This content is a little bit longer.</p>
        <small>9 mins</small>
        <button class="card-btn">點我</button>
      </div>
    </li>
    <li class="card-item">
      <img class="card-img" src="https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60">
      <div class="card-body">
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
          content. This content is a little bit longer.</p>
        <small>9 mins</small>
        <button class="card-btn">點我</button>
      </div>
    </li>
  </ul>
</div>
```

### CSS
```css=
*, *::before, *::after {
  box-sizing: border-box;
}

img {
  ...
  height: auto;
}

.container {
  ...: 1296px;
  margin: 0 auto;
}

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

.card-item {
  ...
}

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


```


## 回報流程

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

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

<!-- 

解答：
ㄏㄏ

-->


回報區
---

| 報數 | Discord 名字  |  Codepen／其他回饋                                                         |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
|  01  | Aya | [Codepen](https://codepen.io/NoNameNote/pen/vYwOGgd) |
|02|Michelle0417|[Codepen](https://codepen.io/michelle0417/pen/GRaJGwY)|
| 03 | Meng | [Codepen](https://codepen.io/menglin1203/pen/bGydKZP) |
| 04 | Hailey | [Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/bGydjwN) |
| 05 | Emma | [Codepen](https://codepen.io/huang_L/pen/bGydjEG) |
| 06 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/ExzjpKb)|
|  07  | han | [Codepen](https://codepen.io/iamHanCheng/pen/rNgVrmG?editors=1100) |
| 08 | Eden |[Codepen](https://codepen.io/iseden/pen/dyEojea)|
| 09 | s870012 |[Codepen](https://codepen.io/idzrvbnl-the-bashful/pen/qBGdyMQ)|
| 10 | tim |[Codepen](https://codepen.io/jskrtivy-the-animator/pen/GRaJBzg)|
| 11 | 小白 |[Codepen](https://codepen.io/xjbowjbr-the-builder/pen/MWdwBdQ)|
| 12 | JUN_ |[Codepen](https://codepen.io/Jun-L/pen/WNBvKVj)|
| 13 |  Angela_la   | [Codepen](https://codepen.io/Angela-the-builder/pen/GRaJBaJ)|
| 14 |  白白   | [Codepen](https://codepen.io/YuBai/pen/oNRXPdj?editors=1100)|
|  15  | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/wvbaEQy) |
|  16  | Tough life | [Codepen](https://codepen.io/hakuei0115/pen/gOJpdJG) |
|  17  | Chia Pin | [Codepen](https://codepen.io/joker-cat/pen/rNgVqLa) |
|  18  | jerry | [Codepen](https://codepen.io/sony791210/pen/Povqybe) |
|  19  | JY | [Codepen](https://codepen.io/jylee0805/pen/XWwbPxL?editors=1100) |
|  20  | macihuang | [Codepen](https://codepen.io/macy1215/pen/vYwOVmW) |
|  21  | Ariel | [Codepen](https://codepen.io/ariel0510/pen/Exzjdvy) |
|  22  | Jiahe | [Codepen](https://codepen.io/Andywang-95/pen/eYaNPBY?editors=1100) |
| 23 | 小趴 | [Codepen](https://codepen.io/papa2415/pen/abrORey) | 
|  24  | Winnie | [Codepen](https://codepen.io/codepen-io-winnie/pen/qBGdQBx?editors=0100) |
|  25  | 詹姆士 | [Codepen](https://codepen.io/z111048/pen/abrOQJq?editors=1100) |
|  26  | WEIWEI | [Codepen](https://codepen.io/weiwei93/pen/NWVqLEM) |
|  27  | easonpan | [Codepen](https://codepen.io/easonpan0904/pen/RwmPqvb) |
|  28  | kawa | [Codepen](https://codepen.io/z83xji6/pen/wvbaRBg) |
|  29  | yunyouob | [Codepen](https://codepen.io/ozkkvlsu-the-animator/pen/BaeNvjp?editors=0100)|
|  30  | mike_2049 | [Codepen](https://codepen.io/mike2049/pen/VwOLqaw?editors=1100)|
|  31  | Yuwen | [Codepen](https://codepen.io/Yuwen-the-reactor/pen/pomJqGQ) |
|  32  | LYC | [Codepen](https://codepen.io/LY-C/pen/GRaJzNQ) |
|  33  | Jacky | [Codepen](https://codepen.io/dgajc/pen/eYaNXmg) |
|  34  | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/VwOLgJx) |
|  35  | Tanyaaaa | [Codepen](https://codepen.io/tanya77777/pen/bGydzJP) |
|  36  | Kaya | [Codepen](https://codepen.io/kayaribi/pen/vYwOPRM) |
|  37  | FUROTO | [Codepen](https://codepen.io/oditudnw-the-flexboxer/pen/OJYVGyR) |
|  38  | Maxine | [Codepen](https://codepen.io/Maxine0713/pen/jOoPRmZ) |
|  39  | Lauren | [Codepen](https://codepen.io/Lauren8/pen/OJYVGgp?editors=1100) |
|  40  | LGJason | [Codepen](https://codepen.io/j811108/pen/BaeNEJZ) |
|  41  | JESS | [Codepen](https://codepen.io/-8412/pen/wvbaZRp) |
|  42  | Jenny_7314 | [Codepen](https://codepen.io/Jenny_000/pen/wvbaLWw?editors=1100) 
|  43  | suandme | [Codepen](https://codepen.io/su-su-the-sans/pen/RwmPOwN) |
|  44  | Andy_12 | [Codepen](https://codepen.io/lifann/pen/ZENGgmw) |
|  45  | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/ZENbzLz) |
|  46  | 雪粒 | [Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/dyEYMLJ) |
|  47  | peggy | [Codepen](https://codepen.io/peggy0419/pen/PovPNMX) |
|  48  | Joey一針 | [Codepen](https://codepen.io/joeychou/pen/LYopZQJ) |
|  49  | LiLiLiLi | [Codepen](https://codepen.io/jungang0414/pen/RwmWRRq?editors=1100) |
|  50  | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/PovPzmr?editors=1100) |
| 51 | yo0x0oy | [Codepen](https://codepen.io/Dayton-Hsieh/pen/yLWYaBz)|
|  52  | hongru-LyNn | [Codepen](https://codepen.io/LyNnYWu/pen/MWdabjd?editors=1100) |
|  53  | Mionne | [Codepen](https://codepen.io/neohyntw/pen/QWRjGRe) |
|  54  | Chen | [Codepen](https://codepen.io/yingchangchen/pen/MWdaJKe) |
|  55  | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/eYapGrm) |
|  56  | boin |[Codepen](https://codepen.io/boinji/pen/MWdaEqW)|
|  57  | oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/vYwNWOa) |
|  58  | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/XWwmVjB) |
|  59  | ninii傳教士 | [Codepen](https://codepen.io/niiniiii/pen/gOJaoBg?editors=1100) |
|  60  | Zander | [Codepen](https://codepen.io/chuangmaster/pen/pomjpLV) |
|  61  | Chieh | [Codepen](https://codepen.io/Wei-Chieh-T/pen/gOJaZvM) |
|  62  | Sana | [Codepen](https://codepen.io/-Chouno/pen/KKLdbjB) |
|  63  | 阿若 | [Codepen](https://codepen.io/skar5268/pen/JjqGKWr) |
|  64  | leo.chang | [Codepen](https://codepen.io/s16777216/pen/oNRbLdy) |
|  65  | Camila | [Codepen](https://codepen.io/camilalo/pen/wvbMgGO) |
|  66  | 黛西 | [Codepen](https://codepen.io/ChiashengLin/pen/eYaJEVr) |
|  67  | 快樂小豬 | [Codepen](https://codepen.io/rtjowfyf-the-lessful/pen/RwmrMay) |
|  68  | Linfe | [Codepen](https://codepen.io/Linfe/pen/oNRbdQK) |
|  69  | Anna  | [Codepen](https://codepen.io/Anna-Teng/pen/ZENQMmR)|
|  70  | Yini Chen | [Codepen](https://codepen.io/CYini/pen/BaejgBP) |
|  71  | Casey | [Codepen](https://codepen.io/Caseyyyyyyyyyyyyyy/pen/XWwXvwx) |
|  72  | JIAWUN |[Codepen](https://codepen.io/wkasixgv-the-sasster/pen/MWdywqx)|
|  73  | Eileen |[Codepen](https://codepen.io/Eileen-io/pen/ZENbKYZ)|
|  74  | sunknight_002 |[Codepen](https://codepen.io/aqortatm-the-solid/pen/BaeKepW)|
| 75 | hsiu8767 |[Codepen](https://codepen.io/hsiu8767/pen/JjqKJmW) |
| 76 | Sonia |[Codepen](https://codepen.io/YUJOU/pen/gOJMKLP?editors=1100) |
| 77 | Aasta |[Codepen](https://codepen.io/Aasta-the-typescripter/pen/OJYXwWQ?editors=1100) |
| 78 | 阿宸 | [Codepen](https://codepen.io/xnocndjt-the-sans/pen/RwmRzmM?editors=1100) |
| 79 | jimmy.0706 | [Codepen](https://codepen.io/JimmyMao/pen/oNRzpPy) |  
| 80 | Shen | [Codepen](https://codepen.io/yan-Shen-the-decoder/pen/zYQKQRL) |
| 81 | tzhengliin(子恆) | [Codepen](https://codepen.io/tzhengliin/pen/ExzNqrW) |
| 82 | hao jing | [Codepen](https://codepen.io/hjxu/pen/GRareQZ?editors=1100) |
| 83  | maruko1105 | [Codepen](https://codepen.io/marukox1105/pen/yLWMXBM) |
| 84  | emmayo | [Codepen](https://codepen.io/emmayo/pen/RwmpZoK) |
| 85  | Frank Chiang | [Codepen](https://codepen.io/frankchiang/pen/wvbdwmb) |
|  86  | Anais77 | [Codepen](https://codepen.io/liu-anais/pen/XWwgbPK) |
|  87  | 真真瑋瑋 | [Codepen](https://codepen.io/qkvyujcc-the-encoder/pen/GRaEEpP) |
|  88  | 勾小勻 | [Codepen](https://codepen.io/Yujhen-Li/pen/dyEzEXY) |
|  89  | Taiwanno1 | [Codepen](https://codepen.io/uhnxswdq-the-typescripter/pen/xxNLJKR?editors=1100) |
|  90  | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/LYozwmX?editors=1100) |
|  91  | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/ZENapZv) |
|  92  | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/LYoQJxW) |
| 93 | ChrisLin | [Codepen](https://codepen.io/vllzfzco-the-reactor/pen/ExzEXKO) |
|  94  | maru3096 | [Codepen](https://codepen.io/deamru/pen/PoryjYM) |

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