觀看金魚都能懂的網頁設計入門：21、22

RWD是什麼呢？

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
我們可以透過媒體查詢，使用該規則（@media rules）為不同的媒體類型/設備應用不同的樣式（手機、平板），讓網頁可以在不同裝置呈現。
而為了因應各種不同解析度的裝置，可以在以下規範做Css設定

@media screen and (條件) and (條件){ css設定 }
@media screen and (min-width: 768px){ css設定 }
寬度小於768就不符合了

在設定RWD設定時，都要在HTML最前面加入以下程式碼，以免在手機呈現時，發生錯誤

<meta name="viewport" content="width=device-width, initial-scale=1.0">

手機裝置大小不一，裝置尺寸這麼多種，要如何設定網頁才可以在這麼多裝置可以都適合?

• 寬度都以百分比呈現
• 有些公司以手機優先設計（儘量），有些公司則以pc為優先設計。

https://codepen.io/mikeyam/pen/GRZevjd RWD初學練習

https://codepen.io/mikeyam/pen/KKzEvLV 排版試做（在平板時把.service .box{margin改變}）