前幾天有提到RWD和如何透過Bootstrap 5排版的內容，相信大家對於排版已經有初步的理解，接著我們來看看如何用CSS做到RWD的功能吧。

Bootstrap 5 RWD響應式網頁的斷點可以參考以下幾個視窗寬度的size，但一般網頁設計主要考量三種載具：手機、平版、電腦(含筆記型電腦)，至少要區分成這三種類型，也可以寫成和Bootstrap 5一樣的斷點。
Size|xs|sm|md|lg|xl|xxl
------------- | -------------
寬度|＜576px|≧576px|≧768px|≧992px|≧1200px|≧1400px

資料來源：https://getbootstrap.com/docs/5.2/layout/grid/

CSS的RWD響應式網頁範例

HTML網頁結構

首先先建立4個盒子，相關HTML可參考以下語法：

<div class="box">
  <div class=boxQ><p>Q：今天天氣很好，你想吃什麼？</p></div>
  <div class="boxA"><p>A：早餐吃什麼</p></div>
  <div class="boxB"><p>B：午餐吃什麼</p></div>
  <div class="boxC"><p>C：晚餐吃什麼</p></div>
</div>

CSS語法，由寬度由小到大撰寫

隨著網頁寬度由小到大進行撰寫，CSS語法參考如下：

@media (min-width: 576px) {
  .box p { 
      background-color: rgba(200,200,0,1); 
      font-size: 1.2em;
  }
}
@media (min-width: 768px) {
  .box p{ background-color: rgba(200,200,200,1);
    font-size: 1.5em; 
  }
}
@media (min-width: 1200px) {
  .box p{ background-color: rgba(200,0,200,1); 
      font-size: 1.8em; 
  }
}

以上CSS語法翻譯成白話文是在說當螢幕寬最小值到達576px時，box中的段落要變成rgba(200,200,0,1)色，字體變成原來的1.2倍；在768px和1200px時也會有不同的變化。要特別留意的是，若@media的寫法是用min-width來寫，螢幕寬度要由小寫到大，以該例子來說就是從576px、768px、1200px的順序撰寫。

CSS語法，由寬度由大到小撰寫

前面說明由小到大撰寫，若是由大小到小，min-width要替換成max-width，語法撰寫順序要從1200px、768px、576px這樣的順序撰寫，參考如下：

@media (max-width: 1200px) {
  .box p { 
      background-color: rgba(200,0,200,1); 
      font-size: 1.8em;
  }
}
@media (max-width: 768px) {
  .box p{ background-color: rgba(200,200,200,1);
    font-size: 1.5em; 
  }
}
@media (max-width: 576px) {
  .box p{ background-color: rgba(200,200,0,1); 
      font-size: 1.2em; 
  }
}

兩者的差異在於用min-width的方式寫，在未達576px時是原始設定，用max-width的方式寫，螢幕超過1200px會是原始的設定，兩種不同的使用時機是網頁設計者必須自行判斷的。兩種都非常建議親自操作比較不同螢幕寬度來觀察變化。

不同寬度隱藏區塊、改變排序

這部分我們可以綜合過去所學，透過CSS達到在不同寬度下，製作區塊隱藏和區塊排序的效果。
也就是說可以在不同寬度底下撰寫語法可以完成不同的排版，參考CSS語法如下所示：

@media (min-width: 576px) {
  .boxQ{width:100%;float:left;}
  .boxA{width:100%;display:none;}
  .boxB{width:100%;float:left;}
  .boxC{width:100%;float:left;}
  .box p { 
      background-color: rgba(200,200,0,1); 
      font-size: 1.2em;
  }
}
@media (min-width: 768px) {
  .boxQ{width:50%;float:left;}
  .boxA{width:50%;float:left;display:block;}
  .boxB{width:50%;float:left;}
  .boxC{width:50%;float:left;}
  .box p{ background-color: rgba(200,200,200,1);
    font-size: 1.5em; 
  }
}
@media (min-width: 1200px) {
  .box{display:flex;}
  .boxQ{order:4;}
  .boxA{order:2;}
  .boxB{order:3;}
  .boxC{order:1;}
  .box p{ background-color: (200,0,200,1); 
      font-size: 1.8em; 
  }
}

display:none與display:block

這些語法唯一要提的部份是display:none和display:block，在寬度576px隱藏boxA(none是整個抹除boxA在網頁中的存在，不佔頁面空間)，在寬度768px時要用display:block讓boxA顯示，若這邊沒有將boxA叫出來，後續到最大寬度時boxA還是會呈現隱藏的狀態。

float浮動

float也是排版很常見的語法，意思就是將該元素浮動。若排版有使用到float，建議所有元素都要用float進行排版，不然無float屬性的區塊會留在原位，可能會造成顯示上被蓋掉或被擠壓到奇怪的地方。所有元素都float會依照原本在網頁中的順序進行排列，在浮動的子元素同高度下，寬度未滿100%這些元素會在同一行，可以浮動測試的連結中嘗試在某些盒子刪掉浮動屬性或是改變寬度與高度觀察變化。浮動測試

其他的語法之前都已經說過囉，若沒有印象要記得複習！

範例參考

以下範例為今天說明內容的實作頁面，包含前述所有案例的演示，請參考：
https://codepen.io/hamagawa76/pen/PoeOerj

是不是很簡單！明天會說明CSS卡片製作的部分了，我們明天見囉！