---
tags: 網頁切版直播班 - 2021 夏季班
---
{%hackmd theme-dark %}
# 7/21 每日任務 Day13：RWD 版型

## 題目

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


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


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


請在 Pen Settings 設定 CSS Reset，如圖：


---

### HTML

<div class="container">
    <div class="main">
      <div class="card">
        <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>
      </div>
      <div class="card">
        <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>
      </div>
      <div class="card">
        <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>
      </div>
      <div class="card">
        <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>
      </div>
    </div>
  </div>

### CSS

img {
    ...
    height: auto;
}

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

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

.card {
    ...
}

@media (max-width: 768px) {
    .card {
        ...    
    }
    .container {
        max-width: 720px;
    }
}
@media (max-width: 576px) {
    .card {
        ...
    }
    .container {
        max-width: 540px;
    }
}

**Ans: [CodePen](https://codepen.io/jeffhung/pen/xxdXVep)**

## 解答
> [Codepen 解答](https://codepen.io/AliceChiang/pen/bGEmBEp)