RWD網頁設計教學:淺談響應式網頁語法

rwd網頁設計

RWD網頁設計前言

隨著行動裝置普及以及成為主流,網站的響應式網頁設計(Responsive Web Design)也越來越重要
或是可以這樣說,在這幾年如果您的網站沒有響應式設計或是響應式設計得不好…那就Low掉了

使用者體驗設計
使用者體驗設計

RWD基本名詞解釋

在進入響應式語法之前,有幾件事情需要先說明清楚,以免看得霧煞煞~

  • 斷點指的是螢幕寬度在什麼範圍的時後顯示特定CSS,Ex: 1280/768/480
  • RWD響應式設計分為2派,1派從手機開始設計,另1派主張從桌機開始設計
  • 手機優先設計從最小寬度(min-width)開始設計,一開始能在小寬度思考什麼是網頁中最重要的內容。
  • 桌機優先設計從最大寬度(max-width)開始設計,一開始就思考怎麼把客戶所有的內容給塞進網頁中。

一般常見的響應式斷點有1280px、1200px、992px、768px、680px、480px…等

RWD網頁設計
RWD語法範例

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網頁設計
RWD網頁設計

結語

今天的RWD響應式語法簡介就介紹到這邊,最後Chris溫馨小提醒以下事項:

不論我們是用桌機優先或是手機優先來做RWD的網頁設計,在網站製作完成移交給客戶或是公司之前,記得要使用Google的行動裝置相容性測試來做驗證,確保我們的響應式網頁設計是被Google認可的哦!

延伸閱讀:Google Search Console教學,3分鐘提升網站排名!

Close