【HTML、CSS教學】11. RWD 響應式網頁
Published in
2 min readFeb 27, 2020
🚩前置作業
在開始寫響應式網頁時,必須要在 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) {}
🚩 響應式的寫法有兩種:
- 由小寫到大
- 由大寫到小
① 由小寫到大
由小寫到大的意思是指,在網頁排版的時候,是優先考量 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 的寫法是由小寫到大,中斷點分別是: