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

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


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


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


> 需使用 **CSS Reset**

---

### HTML

<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

*, *::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://codepen.io/hexschool/pen/VwEwpWe

-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 | 冬天#5215 | [Codepen](https://codepen.io/winter_/pen/gOBdbJa) |
| 2 | Berlin#7338 | [Codepen](https://codepen.io/3qberlin/pen/YzJOXKK?editors=1100) |
| 3 | Kulimusoda#2785 | [Codepen](https://codepen.io/yuch3n_chen/pen/MWPqweG) |
| 4 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/poxOJod) |
| 5 | 不要迷戀媽的奶#0295 | [Codepen](https://codepen.io/kewdjbwp-the-typescripter/pen/ZEqMGyM?editors=0100) |
| 6 | 黑白兔#0684 | [Codepen](https://codepen.io/johnny329/pen/poxOJwV) |
| 7 | Eden.C#9359 |[codepen](https://codepen.io/iseden/pen/PoydqOp)|
| 8 | DeLi#8324 |[codepen](https://codepen.io/delichaomoon/pen/dygqoJo)|
| 9 | JimWang#6134 |[codepen](https://codepen.io/Jim-Wang-the-selector/pen/LYgJVXp)|
| 10 | Eero#1147 |[codepen](https://codepen.io/Eero-Chiao/pen/xxyaGBb)|
| 11 | satarkuo#5736 |[codepen](https://codepen.io/SatarKuo/pen/ZEqMGwP?editors=1100)|
| 12 | Lychee KK |[Codepen](https://codepen.io/kakakala/pen/YzJOXgp)|
| 13 | Tami#6742 | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/qBJMdwO) |
| 14 | Snadra#1987 | [Codepen](https://codepen.io/mlqmhltg/pen/xxyaGMb) |
| 15 | Ann Chou#0146 | [Codepen](https://codepen.io/annchou_illu/pen/mdzGeJB) |
| 16 | Döng#2328 | [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/rNqZOJx) |
| 17 | 陳庭#3529 | [Codepen](https://codepen.io/yuting850309/pen/mdzGeXL?editors=1100) |
| 18 | LeeRu#1771 | [Codepen](https://codepen.io/IMGameKing/pen/poxOjGv?editors=0100) |
| 19 | 依依#6306 | [Codepen](https://codepen.io/Rita-Yang/pen/PoydPxx?editors=1100) |
| 20 | Jacky7035#9423 | [Codepen](https://codepen.io/adens123/pen/dygqYqZ) |
| 21 | jia yu#8896 | [Codepen](https://codepen.io/fjqxaznl-the-reactor/pen/QWZVjoL) |
| 22 | ChaosTu#9311 | [Codepen](https://codepen.io/torotu/pen/PoydPgX?editors=1100) |
| 23 | 辣椒#1002| [Codepen](https://codepen.io/chilichen118/pen/PoydPVX) |
| 24 | Ting#0912| [Codepen](https://codepen.io/Ting66/pen/KKGxVdV?editors=1100) |
| 25 | しあわせね#0036| [Codepen](https://codepen.io/Front-end-engineer/pen/zYmJvmo?editors=1100) |
| 26 | peihsuan#6315| [Codepen](https://codepen.io/peihsuanlai/pen/OJBoygw) |
| 27 | Tina02#2691 | [codepen](https://codepen.io/riifwerr-the-selector/pen/zYmJrdP) |
28|雲漢#5319|[codepen](https://codepen.io/keon981/pen/BaqOjZa?editors=1100)
| 29 | 銀光菇#1692 | [codepen](https://codepen.io/genesynthesis/pen/poxOggy) |
| 30 | Quantum#6093 | [Codepen](https://codepen.io/Min-Hao-Hung/pen/dygqGdw) |
| 31 | 翔.#0859 | [Codepen](https://codepen.io/energy95272z/pen/poxOgqw) |
| 32 | 魚翅#3100 | [Codepen](https://codepen.io/Fukahire/pen/YzJOwBo) |
| 33 | Uli#1946 | [Codepen](https://codepen.io/uli1313/pen/XWxPXOq) |
| 34 | ABOOS#6276 | [Codepen](https://codepen.io/guhungyin/pen/wvYEMbW) |
| 35 | Celia#1715 | [Codepen](https://codepen.io/drdrvpgf-the-bashful/pen/oNaPbVV) |
| 36 | Pigsue#5981 | [Codepen](https://codepen.io/weixiii/pen/oNaPxvR) |
| 37 | SKey#9905 | [Codepen](https://codepen.io/Dale-Chien/pen/qBJMbzg) |
| 38 | 史滴芬#4310 | [Codepen](https://codepen.io/steven870107/pen/LYgJNEv) |
| 39 | K（アギルダー）#0386 | [Codepen](https://codepen.io/klay376014/pen/NWOLNrg) |
| 40 | jelly77#2088 | [Codepen](https://codepen.io/Ming-chiang/pen/PoydNGG) |
| 41 | Bruce-Lee#0629 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/GRYXZjZ) |
|42|肉個阿倫#7172|[Codepen](https://codepen.io/i9574385/pen/rNqZemQ)|
|43|Daisy_Li#4231|[Codepen](https://codepen.io/lidairong-gmail-com/pen/NWOLNdv)|
|44|Ataraxia#9977|[Codepen](https://codepen.io/ataraxia8888/pen/YzJvgGe)|
|45|Lainie#1931|[Codepen](https://codepen.io/Lainie88/pen/gOBdrXg)|
|46|andrew0404#4576|[Codepen](https://codepen.io/Loonng/pen/dygqMKY)|
|47|DyH#0526|[Codepen](https://codepen.io/dorihung/pen/gOBdrNG)|
|48|gahwa#3562|[Codepen](https://codepen.io/gahwa17/pen/rNqZLBX)|
|49|vvay#4113|[Codepen](https://codepen.io/pellmssx-the-sasster/pen/wvYEWGX)|
|50|Hao#2485|[Codepen](https://codepen.io/Seanfeb16/pen/abRaZZd)|
|51|鉦勝#8333|[Codepen](https://codepen.io/atckmax823/pen/YzJOWpQ)|
|52|汪汪#4486|[Codepen](https://codepen.io/hunwooooof/pen/jOevrJN)|
|53|judy123#2363|[Codepen](https://codepen.io/hsuantsong/pen/QWZVKdj)|
|54|Rayo#8002|[Codepen](https://codepen.io/loborayo/pen/dygqpdQ)|
|55|姜承#8204|[Codepen](https://codepen.io/Troy0718/pen/BaqOWoe)|
|56|Akira#9996|[Codepen](https://codepen.io/Akira-Chen/pen/YzJOZLg)|
|57|兔子#6746|[Codepen](https://codepen.io/CarrotDetector/pen/XWxPMLq)
|58|henrykgb#5749|[Codepen](https://codepen.io/henrymorgan666/pen/oNaPWYK)
|59|HsienLu#8316|[Codepen](https://codepen.io/Hsienlu/pen/WNagjPJ)
|60|wiimax#4564|[Codepen](https://codepen.io/rochelwang1205/pen/poxOJod)
|61|吳偉雄恩#2256|[Codepen](https://codepen.io/Bamboo1212/pen/mdzGwXx?editors=1100)|
|62|townyuan#2653|[Codepen](https://codepen.io/townyuan/pen/oNaPwqw)|
|63|司機叔叔#2463|[Codepen](https://codepen.io/bigv5566/pen/GRYXvRw)|
|64|N0c7iluc3n7#4390|[Codepen](https://codepen.io/huang-yu-cheng/pen/ExdevZw)|
|64|Yihwei#2027|[Codepen](https://codepen.io/auntebur-the-sans/pen/yLRxXod?editors=1100)|
|65|snow#0255|[Codepen](https://codepen.io/snow21723/pen/abRayjG)|
|66|Kaya#8857|[Codepen](https://codepen.io/laron9486/pen/ZEqMJVX)|
|67|變羊魔法#6372|[Codepen](https://codepen.io/cssf998811/pen/MWPqEaQ)|
|68|Jennifer Chuang#3937|[Codepen](https://codepen.io/yujhen/pen/zYmJEzy)|
|69|HsuanTang#1349|[Codepen](https://codepen.io/HsuanTang/pen/YzJOEwZ)|
|70|Janet#5784|[Codepen](https://codepen.io/janetlinnn/pen/rNqZYxX)|
|71|Yuu#5361|[Codepen](https://codepen.io/alycehwy/pen/VwEGrdM)|
|72|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/abRaVQp)
|73|duck#3310|[Codepen](https://codepen.io/papy0715/pen/NWOLXPQ)|
|74|Aritan#1931|[Codepen](https://codepen.io/Aritan/pen/YzJOYGO)|
|75|jackwu#4437|[Codepen](https://codepen.io/jackwu1588003/pen/LYgJeym)|
|76|浪裡小白龍#6860|[Codepen](https://codepen.io/Emillo/pen/eYPLMJw?editors=1100)|
|77|泊岸#3466|[Codepen](https://codepen.io/qoq77416416/pen/NWOLYGz?editors=1100)|
|78|PoWei#8484|[Codepen](https://codepen.io/harrison-wei-lai/pen/NWOLZRz)|
|79|YHT#1696|[Codepen](https://codepen.io/YHT31/pen/poxOXpB)|
|80|andychiou#4830|[Codepen](https://codepen.io/andychiou1113/pen/poxOMme)|
|81|杰_jie#9088|[Codepen](https://codepen.io/hmj8805/pen/RweYdyx)|
|82|鄭舜仁#6606|[Codepen](https://codepen.io/randomno/pen/jOeeLGP)|
|83|CuraLin#2648|[Codepen](https://codepen.io/curalin/pen/abRRLpa?editors=1100)|
|84|betty#0693|[Codepen](https://codepen.io/betty-hu/pen/BaqqJQb)|
|85|StellaHsu#2687|[Codepen](https://codepen.io/stella950114/pen/ExddQve)|
|86|David0799#4415|[Codepen](https://codepen.io/David0799/pen/BaqqrMP)|
|87| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/MWPPVwz) |
|88| homer#1525 | [CodePen](https://codepen.io/Buckhorn/pen/poxxKXV) |
|89| Rey#1878 | [codepen](https://codepen.io/yfatgmpc-the-bold/pen/vYVVraE?editors=1100) |
|90| liam9930#4129 | [codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/jOeeNwG?editors=1100) |
|91| Maxine#9061 | [codepen](https://codepen.io/Maxine_Liao/pen/zYmmJQP) |
|92| alan0305#2423 | [codepen](https://codepen.io/alan0305/pen/gOBQOJe) |
|93| moins13#3346 | [codepen](https://codepen.io/kyechen13/pen/ZEqmYrO) |
|94| FiReBrO#0557 | [codepen](https://codepen.io/firebro42/pen/poxQjeO) |
|95| Tim123#8361 | [codepen](https://codepen.io/Wangtim4/pen/abRQNGR) |
|96| yoyo#1003 | [codepen](https://codepen.io/pen/VwEEwPP) |
|97|阿榮#8277|[Codepen](https://codepen.io/codeitaday/pen/poxQEZj)|
|98|Yvonne#2721|[Codepen](https://codepen.io/Evonne/pen/jOeevor)
|99|jimhop#6510|[Codepen](https://codepen.io/jimsansssss/pen/QWZJmyO)
|100|jun777#2468|[Codepen](https://codepen.io/js18151102/pen/jOeQZZB?editors=1100)|
|101|wendyli#2155|[Codepen](https://codepen.io/rockayumitw/pen/dygQQXy?editors=0100)|
|102|冷曄#2155|[Codepen](https://codepen.io/HgHale/pen/RweEPWq)|
|103|小華#3204|[Codepen](https://codepen.io/franfranfran/pen/RweEWyG?editors=1100)|
|104|alll6z#9204|[Codepen](https://codepen.io/A6Z/pen/jOeXqPP)|
|105|Elma#4317|[Codepan](https://codepen.io/4317/pen/abRPpyx)
|106|Sonia Wu#7154|[Codepan](https://codepen.io/YUJOU/pen/yLRGqmQ?editors=1100)
|107|bonnieli1414#4906|[Codepan](https://codepen.io/bonnieli1414/pen/oNamvKJ)
|108|weiting#3489|[Codepan](https://codepen.io/weiting14/pen/JjmxLYa?editors=1100)
|109|MitA#7407|[Codepan](https://codepen.io/qaz15996398/pen/Rwevyro)
|110|長方形#9612|[Codepan](https://codepen.io/imjjw/pen/VwEgdbX)
|111|JasonChang#7847|[Codepan](https://codepen.io/jsonChangJava/pen/QWZowMx)
|112|小魚#8614|[Codepen](https://codepen.io/gizelliang/pen/XWxGXXO)
|113 | Zhong#8917 | [Codepen](https://codepen.io/klfjrlod-the-sasster/pen/MWPxjJP) |
|114 | 羽毛#5463 | [Codepen](https://codepen.io/KYuFeather/pen/oNaVwJR) |
|115 | QOO#8446 | [Codepen](https://codepen.io/QOOQOOQ/pen/OJBqOmP?editors=1100) |
|116|JhouHank#8132|[Codepan](https://codepen.io/JhouHank/pen/WNamaGP)
|117|penny#6214|[Codepan](https://codepen.io/penny8989/pen/yLRwZLr)
|118|歐陽龍龍#1061|[Codepan](https://codepen.io/dizzydog-rgb/pen/ZEqMvWp)
|119|Joanne Hu#0010|[Codepan](https://codepen.io/nelbabkv-the-flexboxer/pen/bGmJqrr?editors=1100)|
| 120 | 薇拉#8110 |[Codepen](https://codepen.io/michellecc0522/pen/abRxJgb)|
| 121 | Rowan#3253 |[Codepen](https://codepen.io/Rowanlin/pen/BaqEVXb)|
| 122 | 小明#4408 |[Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/vYVMoYq)|
| 123 | 喬喬#2824 |[Codepen](https://codepen.io/joanne-wei/pen/JjmqPyX)|
| 124 | 東東#5015 | [Codepen](https://codepen.io/wearymask/pen/bGmJGaE) |
| 125 | Jaredlee#5887 | [Codepen](https://codepen.io/jared-lee/pen/Jjmqvda?editors=1100) |
| 126 | FanJJ#8061 | [Codepen](https://codepen.io/yfchenn/pen/poxXLOJ) |
| 127 | NathanJames#8120 | [Codepen](https://codepen.io/ufo060204/pen/LYgKmwK) |
| 127 | 又竹#7302 | [Codepen](https://codepen.io/YO_ZU/pen/GRwKKWp?editors=1100) |
| 128 | +7#8492 | [Codepen](https://codepen.io/tojibom/pen/dyQbWmb) |
| 129 | lishuan#3698 | [Codepen](https://codepen.io/lishuan/pen/xxQxwoO?editors=1100) |
| 130 | 路人ADCB#9851 | [Codepen](https://codepen.io/markyourpage/pen/YzRPeBb) ||
| 131 | 初心#9021 | [Codepen](https://codepen.io/Sylviax/pen/qBQEgvJ?editors=1100) |
|132|cmlb0212|[Codepen](https://codepen.io/Chungmin0212/pen/wvQKLYW?editors=0110)|
|134|慢慢來#4035|[Codepen](https://codepen.io/kikiyang/pen/oNQjObv?editors=0100)|