遇到 max-width,需扣掉 0.02px,如下示意:
完成結果示意:
請建立 practice/rwd_sample.html
檔案,提供以下的 html:
及 CSS:
註:斷點的數值(記下來):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。
參考作法: