Table of Contents
ToggleRWD網頁設計前言
隨著行動裝置普及以及成為主流,網站的響應式網頁設計(Responsive Web Design)也越來越重要
或是可以這樣說,在這幾年如果您的網站沒有響應式設計或是響應式設計得不好…那就Low掉了
![使用者體驗設計](https://www.iwangoweb.com/wp-content/uploads/2019/12/experience-3239623_640.jpg)
RWD基本名詞解釋
在進入響應式語法之前,有幾件事情需要先說明清楚,以免看得霧煞煞~
- 斷點指的是螢幕寬度在什麼範圍的時後顯示特定CSS,Ex: 1280/768/480
- RWD響應式設計分為2派,1派從手機開始設計,另1派主張從桌機開始設計
- 手機優先設計從最小寬度(min-width)開始設計,一開始能在小寬度思考什麼是網頁中最重要的內容。
- 桌機優先設計從最大寬度(max-width)開始設計,一開始就思考怎麼把客戶所有的內容給塞進網頁中。
一般常見的響應式斷點有1280px、1200px、992px、768px、680px、480px…等
![RWD網頁設計](https://www.iwangoweb.com/wp-content/uploads/2019/12/121d3c318_s-min.jpg)
CSS語法示範
好的,進入RWD語法設計正題,最重要的程式碼就是 @media only screen and(mxx-width: XXXpx){寫入CSS語法}
@media only screen and(max-with: XXXpx) 指的就是當螢幕寬度在XXXpx以內的時候瀏覽器要套用什麼CSS樣式
以下舉個實務上的語法範例,我們採用桌機優先設計來說明。提醒:手機優先設計要從小螢幕開始設計哦~
@media only screen and (max-width: 1280px){
#main #content-wrap {
font-size: 16px;
background-color: #666666;
}
}
@media only screen and (max-width: 768px){
#main #content-wrap {
font-size: 18px;
background-color: #AAAAAA;
}
}
@media only screen and (max-width: 480px){
#main #content-wrap {
font-size: 20px;
background-color: #FFB7DD;
}
}
以上範例可以想成 CSS ID “main” 以及 “content-wrap” 的網頁區塊:
- 當使用者用桌上型電腦瀏覽時,字體大小為16px且背景顏色為深灰色
- 而當使用者切換成平版瀏覽時,字體大小為18px且背景顏色為淺灰色
- 最後當使用者使用手機瀏覽時,字體大小為20px且背景顏色為粉紅色
有人可能會問Chris,為什麼螢幕寬度必需隨程式碼由上至下遞減呢?老師剛說的有沒有在聽?因為是桌機優先設計阿!其實正確來說呢…
CSS的邏輯是後面寫的會蓋過前面的語法,所以如果採用Desktop-first的設計,RWD語法由上至下依序必須由螢幕寬度大寫到螢幕寬度小;反過來說如果採用Mobile-first的設計,RWD語法由上至下依序必須由螢幕寬度小寫到螢幕寬度大。
![RWD網頁設計](https://www.iwangoweb.com/wp-content/uploads/2019/12/802fba9ec3875_s-min.jpg)
結語
今天的RWD響應式語法簡介就介紹到這邊,最後Chris溫馨小提醒以下事項:
不論我們是用桌機優先或是手機優先來做RWD的網頁設計,在網站製作完成移交給客戶或是公司之前,記得要使用Google的行動裝置相容性測試來做驗證,確保我們的響應式網頁設計是被Google認可的哦!