RWD是什麼
RWD(Responsive Web Design)響應式網頁設計,是一種網頁設計的概念,讓同一個頁面在不同的裝置上(例如:桌機、筆電、平板電腦、手機等等),透過CSS的設計,些微變換頁面整體的排版,卻也可以呈現相同的內容給使用者。
如何撰寫RWD網站
撰寫RWD網站時有兩項重要的項目需要記住,分別是”常用尺吋”及”@media撰寫規範”例,剩下的基本上就是考驗工程師的CSS撰寫功力,接下來就來看看該如何撰寫RWD網站:

(RWD網站範例:左圖為桌機版頁面,右圖為手機版畫面)
RWD網站常用尺寸
在設計RWD網站時,我們需要考慮不同裝置的螢幕尺寸。一般來說,我們會根據以下幾種尺寸來設計:
◆大於1200px的大螢幕(如桌機)
◆介於992px至1199px的中型螢幕(如筆記本電腦)
◆介於768px至991px的小型螢幕(如平板電腦)
◆以及小於767px的超小型螢幕(如手機)
上述4種尺寸幾乎涵蓋了現有設備尺寸,當然各位也可以根據自己的喜好,針對不同設備設置不同的RWD網站尺寸變化。
設定 meta viewport
meta viewport是寫在<head>區塊的HTML標籤,能夠控制網頁在各種裝置上的縮放行為和視窗大小。而要設定meta viewport,只需要在HTML的<head>部分加入以下程式碼:
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
這段程式碼告訴瀏覽器,網頁的寬度應該等於裝置的螢幕寬度,並且初始的縮放比例為1。這樣的設定可以確保網頁在各種裝置上都能適應性的顯示,並應對到後續提及的media宣告。
media撰寫範例
在CSS中有一個種宣告,可以告訴頁面「當頁面的寬度為xxx時,則使用這一套CSS變化」,以實際範例來說,就會像是「當頁面寬度為1000px時圖片長寬是1:1,但寬度為500px時圖片長寬比變成10:1」。
而這個宣告也被稱為”media query”,因此我們可以利用這個宣告來製作RWD網站,實際撰寫方為:
@media screen and (max-width: 1200px) {
body {
background-color: yellow; /* 螢幕寬度小於或等於1200px時的背景顏色 */
}
}
@media screen and (max-width: 992px) {
body {
background-color: red; /* 螢幕寬度小於或等於992px時的背景顏色 */
}
}
或是
@media screen and (min-width: 1200px) {
body {
background-color: yellow; /* 螢幕寬度大於或等於1200px時的背景顏色 */
}
}
@media screen and (min-width: 992px) {
body {
background-color: red; /* 螢幕寬度大於或等於992px時的背景顏色 */
}
}
這樣,當螢幕寬度變化時頁面的背景顏色也會隨著變化
RWD網站對SEO有影響嗎
手機版內容與桌機內容一致
根據Google行動版最佳作法提到,手機版的內容應該要與桌機版呈現的內容一致,尤其在現在手機普遍的時代下,Google已經漸漸以手機檢索作為主要的排名依據之一,因此利用RWD網站僅調整CSS樣式的特性,可以確保行動版內容與桌機版是一致的,藉此避免因為內容不一致而影響到SEO的排名。
對使用者比較友善
或許你曾去過某些老舊的網站,在用手機看頁面時會呈現桌機的樣式,但因為尺寸不合的關係導致圖片太小,或是內容超出螢幕之外,需要用手撥動才可以看到內容,這些對於使用者不方便的設計都會間接扣到SEO成效。
而RWD網站能夠根據使用者不同設備尺寸切換合適的畫面,避免了上述的負面情境發生,增加使用者體驗的同時,也可以避免因畫面設計不良,而被Google拒絕收錄頁面。
載入速度較快
RWD網站通常會比非RWD網站的載入速度來得快。這是因為RWD網站只需要載入一次,而非RWD網站可能需要載入多次。快速的載入速度可以提升使用者的體驗,也是Google SEO排名的一個重要因素。
網址單一
RWD網站的另一個優點是它的網址是單一的,在過往我們曾提到,當網址只要有一點不同,Google就會判定成不同的頁面。而因應某些網站或APP的設計需求,可能會將桌機與手機的網址設定不同,例如:桌機版是www.example.com,手機版是m.example.com(淘寶、momo就是這類設計方式)的,當然這種設計方式沒有錯誤,並且也可以藉由canonical設定來解決,但在系統維護上或以Google索引等角度來看,RWD的設計方式對於SEO還是比較好一點。
延伸閱讀:什麼是Canonical?運用標準網址解決重複分頁
總結來說,RWD網站可以提供使用者更好的瀏覽體驗,對於Google及SEO成效來說都有正面幫助,在決定網站製作時是一個不錯的選擇,但各位讀者仍須注意,製作RWD網站不等於SEO完全成功,仍需進行許多樣的網站優化才能夠取得良好的成效。
看完了這麼多,我想你對RWD響應是網站設計及SEO關聯已經有了一定的了解,如果喜歡我的文章,或是未來想要了解更多關於SEO的消息,請關注我的網站,我會努力將各種知識分享給各位:)