【HTML、CSS教學】11. RWD 響應式網頁

🚩前置作業

在開始寫響應式網頁時，必須要在 head 標籤內放入相關的語法。

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

🚩 @media

RWD 是在 .css 檔案使用 @media 將需要響應式的 CSS 語法包在裡面：

min-width的意思是指，當最小寬度 >540px 時，就套用裡面的 CSS 語法。

@media(min-width: 540px){ }

max-width的意思是指，當最大寬度 < 540px 時，就套用裡面的 CSS 語法。

@media(max-width: 540px) {}

🚩 響應式的寫法有兩種：

1. 由小寫到大
2. 由大寫到小

① 由小寫到大

由小寫到大的意思是指，在網頁排版的時候，是優先考量 mobile(行動裝置)的排版，在依序做到 desktop(桌電)的排版。

好處是介面優化是以 mobile 作為最先考量。

② 由大寫到小

由大寫到小的意思是指，在網頁排版的時候，是優先考量 desktop(桌電)的排版，在依序做到 mobile(行動裝置)的排版。

好處是介面優化是以 desktop作為最先考量。

🚩 CodePen 範例

範例中，在最上面的 .box1 分別將兩種響應式的寫法寫出來，
從大到小的顏色分別為： 紅、橙、黃、綠。

.box2 是多欄式的排版，由大到小分別是：

四欄式、三欄式、二欄式、單欄式排版。

🚩 常見的中斷點

常見的行動裝置中斷點分別是：

768px → iPad
767px → iPad以下
414px → iPhone 6 Plus — (視專案族群)
375px → iPhone 6– (視專案族群)
320px → iPhone 5、SE

Bootstrap 4 的寫法是由小寫到大，中斷點分別是：

Bootstrap4官網參考來源