5.3 breakpoint 練習

Media Query 遇到 max-width

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

breakpoint 練習

完成結果示意：

請建立 practice/rwd_sample.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：

* {
  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。

參考作法：