> For the complete documentation index, see [llms.txt](https://docs.webmix.cc/responsive-web-design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webmix.cc/responsive-web-design/4.-bootstrap-framework/5.3-breakpoint-lian-xi.md).

# 5.3 breakpoint 練習

## Media Query 遇到 max-width

遇到 max-width，需扣掉 0.02px，如下示意：

<figure><img src="https://1944217912-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LjKdA4Fh20JqZL00ZcX%2Fuploads%2FXWpmAspMYnLujEXoxsON%2Fbreakpoint_for_max_width.png?alt=media&amp;token=eb8f4b1b-f2f6-45e3-b30e-f13051eaa2e7" alt=""><figcaption></figcaption></figure>

## breakpoint 練習

完成結果示意：

{% embed url="<https://youtu.be/SDc7mDgVQdg>" %}

請建立 **`practice/rwd_sample.html`** 檔案，提供以下的 html：

```html
<section class="content_sec">
      
  <div class="block">
    <div class="img_block">
      <img src="https://picsum.photos/id/238/400/300">
    </div>
    <div class="text_block">
      <h1>風景標題1</h1>
      <p>
        風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落
        風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落
        風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落
        風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落
        風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落
        風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落
        風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落
        風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落
        風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落
        風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落
      </p>
    </div>
  </div>

  <div class="block img_right">
    <div class="img_block">
      <img src="https://picsum.photos/id/242/400/300">
    </div>
    <div class="text_block">
      <h1>風景標題2</h1>
      <p>
        風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落
        風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落
        風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落
        風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落
        風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落
        風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落
        風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落
        風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落
        風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落
        風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落風景段落
      </p>
    </div>
  </div>
  
</section>
```

及 CSS：

```css
* {
  box-sizing: border-box;
}
body{
  margin: 0;
}
section.content_sec{
  border: 1px solid black;
  width: 1320px;
  margin: 0 auto;
}

section.content_sec div.block{
  border: 1px solid red;

  display: flex;
  align-items: flex-start;
}

/* ===== 圖片區塊 ===== */
section.content_sec div.block div.img_block{
  border: 1px solid green;
  font-size: 0;
  flex-basis: 300px;
  flex-shrink: 0;
}

section.content_sec div.block div.img_block img{
  width: 100%;
}

section.content_sec div.block.img_right div.img_block{
  order: 2;
}

/* ===== 文字區塊 ===== */
section.content_sec div.block div.text_block{
  border: 1px solid purple;
  flex-grow: 1;
}
section.content_sec div.block div.text_block h1{
  margin: 0;
}
section.content_sec div.block div.text_block p{
  margin: 10px 0 0 0;
}

section.content_sec div.block.img_right div.text_block{
  order: 1;
}
```

註：斷點的數值(記下來)：576、768、992、1200、1400。

請執行以下：

一、瀏覽器寬度 `>=` 1400px 時：(此項已預設完成。)

1、`section.content_sec` 元素的寬度設定成 1320px。

二、1200px `<=` 瀏覽器寬度 `<=` 1399.98px 時：

1、`section.content_sec` 的寬度設定成 1140px。

三、992px `<=` 瀏覽器寬度 `<=` 1199.98px 時：

1、`section.content_sec` 的寬度設定成 960px。

四、768px `<=` 瀏覽器寬度 `<=` 991.98px 時：

1、`section.content_sec` 的寬度設定成 720px。

五、576px `<=` 瀏覽器寬度 `<=` 767.98px 時：

1、`section.content_sec` 的寬度設定成 540px。

2、`div.img_block` 的寬度(我使用 `flex-basis`)，設定成 40%。

六、瀏覽器寬度 `<=` 575.98px 時：

1、`section.content_sec` 的寬度設定成 100%。

2、`div.block` 設定成上圖下文，也就是將 `flex-direction` 設定成 column。

3、`div.img_block` 的 `flex-basis` 設定回預設值，也就是 auto。

4、`section.content_sec div.block.img_right div.img_block` 的 `order` 設定成 1。

5、`section.content_sec div.block.img_right div.text_block` 的 `order` 設定成 2。

參考作法：

{% embed url="<https://codepen.io/carlos411/pen/eYbzGwW>" %}