什麼是 RWD 響應式設計？為何網站需要 RWD 功能？

內容目錄

一、RWD響應式設計的由來

什麼是 RWD 響應式設計 ？為何網站需要 RWD 功能 ？響應式網站設計 RWD 是 Responsive web design 的縮寫，最早之前是在2010年由美國著名的網頁設計師Ethan Marcotte所提出的網頁設計技術(見：http://alistapart.com/article/responsive-web-design)，為了因應科技發展快速，有越來越多不同大小的螢幕出現而導致網站顯示問題的解決方案，可以說是 RWD 技術 的先驅。

在RWD這個技術概念被提出之前，網站開發者在設計網頁時的內部元素排版都是按照桌上型電腦的螢幕大小去設計的，像是文字的 padding (內距)、 Margin (外距)，圖片尺寸等都是固定的，包含每一個元素區塊只需要設定適應市面上主流螢幕的大小就好，在當時網站的建構相當容易，並不需要考慮太多顯示上的問題。

直到2007年1月， Apple 發表了最新型的手機 – iPhone 第一代，開啟了全世界風行智慧型手機的潮流，透過智慧型手機隨時隨地無線上網的方式開始影響到人們的生活習慣，”網路”漸漸的變成可以取代電視廣告、報章雜誌、傳單等傳統的一種更重要的行銷方式，但這時大部分的網站在透過智慧型手機瀏覽時，依然存在相當大的問題。

如前言所提到的，網頁內的區塊( Section )元素都是在設計時都是一樣大小的，因此在智慧型手機的螢幕中，網站內容的排版不是雜亂無比，就是只能瀏覽到部分的內容，就算網站的內容完整呈現在智慧型手機螢幕中，但卻只是以手機螢幕等比例的縮小所有網站元素，當使用者要點選 MENU (網站選單)跳轉到其他頁面時，必須透過手勢放大螢幕中選項的區塊，才能夠點按到連結，當想瀏覽網站的其它區塊時又必須縮小螢幕顯示範圍，這樣的操作方式對於瀏覽網站是非常不便利的。

而當網站開發者對於這樣的問題還在嘗試解決方法時，智慧型手機開發商為了要帶給比其他廠商更好的行動上網體驗，率先提供了簡單的解決方式，就是透過智慧型手機中的操作設定，當使用者點選搜尋框或文字方框時，會自動放大該區塊讓使用者能更清楚的看到內容，而點擊文字連結也會有放大區域檢視所有連結，以供使用者挑選想要點選的文字項目，這樣的做法在當時也算是解決了網頁內容太小無法點選或總是點選錯誤選項的問題，但對於使用者而言，還是多了一個必須設定或點選的步驟，在網頁操作的流暢度上來講依然不足。

人類之所以為萬物之靈，就是會不斷的追求進步，網站設計師們當然不滿足於只侷限在這樣治標不治本的功能，於是開始了網站 “雙版本時代“，也就是為網站分別建立電腦版網站( Computer Website )以及手機版網站( Mobile Website )，透過程式語言對網站進行調整，使內容元素可以在智慧型手機螢幕中正確顯示，而對於像按鈕、連結文字、圖片等也可以各別為了使用者操作便利而自行定義，刪去不必要的內容，強調客戶會比較想了解的公司業務或產品的相關服務，並且在排版上採用直式的作法，免去其他不必要的特效(比如當游標移到連結文字時會更改顏色)等，都變成了手機版網站的重點。雙版本的方式，大大的改善使用者瀏覽網站的意願，同樣的內容不同的排版方式，就掌握了另一群以行動上網為主的客群商機。

但凡事有利就有弊，隨著時間的推移，漸漸的雙網站版本的弊端也漸漸地浮上檯面，以下列出較常見的問題：

1.因為是兩個網站必須建立兩個不同的網址，可能網域( Domain Name )相同，只有子網域( SubDomain )不同，對於使用者而言判別上常常都會有所誤導，在電腦版開啟手機版網站時會有內容排版無法正確顯示的問題。

2.手機版網站為了要能適應螢幕大小，在設計上並不能完全套用電腦版內容就好，必須合理安排網站內部頁面的連結路徑，如果說我今天在電腦版上點選”商品介紹”這個選項，會跳轉到所有商品列表，而如果要在手機版中進入同樣的商品介紹頁面，必須要先找到商品分類，才能進入商品列表，對於使用者來說對於同樣的網站內容卻有不同的操作方式，容易造成混淆。

3.要建立兩個網站，如果是請網站設計公司設計會有必須付出更多經費成本的問題，而如果是要自行架站，所花費的時間也是使用RWD網頁設計的兩倍，更何況手機版網站的架構又是另一種概念，並不是照搬套用電腦版網站就好。

4.當電腦版網站的內容有更新，比如新商品上架，修改價格等，手機版也要同步的做更新，等於說同一件事必須要花費兩倍的精神去完成，對於後續的網站維護拉高了時間成本。

雖然有上述的種種缺點，但手機版網頁依然是當時的網站開發人員最”熟悉”的方法，畢竟RWD的概念才剛剛被提出，尚未成熟到可以被自由運用的地步，在新技術的方法還停留在書面文字間時，雙網站的解決方案就先湊合者用吧！

可惜的是好景不常，智慧型手機雖然攜帶便利，可是螢幕畢竟還是太小，對於使用者來說無論是閱讀文字或觀賞影片對於眼睛的傷害是有深遠的影響，而當市場有需求時，就代表商機的來臨，於是智慧型手機的廠商們出於保護人類視力的社會責任，開發出了螢幕更大更清晰，而且又能隨身攜帶的”平板電腦”，而且還標榜著”追劇神器”、”遊戲終結者”等各式各樣的廣告詞，於是平板電腦再次掀起了一波搶購熱潮，對於移動設備的使用，人們有更好的選擇。

但對於網站開發者而言，這無疑是一個不太妙的消息，為了搶佔行動上網的商機，已經要多維護管理一個手機版網站了，現在又多了一個平板電腦，難道又要多建立一個平板電腦網站？這是一個搞死人的節奏啊！無數網站開發人員在心中吶喊著，但不管如何這是市場的趨勢，總是要想辦法解決，於是曾經被遺忘在角落的 RWD響應式設計再次獲得了重視。

二、什麼是 RWD 響應式設計？

RWD就是運用 HTML5 、 CSS3 等程式語言的運用，讓網站能夠自適應不同設備的螢幕大小，呈現出正常的網站內容，就好像水裝在不一樣的容器中，就會變成不一樣的形狀的概念。而其原理就是透過語法給予指令，定義所有網站內容元素在不同的螢幕解析度下，應該呈現的排版及樣式。

而如果要更加深入解說 RWD，必須要提到 Viewport (視埠，可視區域)這個名詞，因為網站的設置內容對於智慧型手機或平板的內容來說太大，而RWD運用Viewport在移動設備端的瀏覽器中建立一個虛擬的可視區域，透過定義Viewport的數值，告訴瀏覽器應該在當前使用的瀏覽設備大小給予網站內容怎樣的比例，以完成網站資料自動適應螢幕大小的目的。

另外一個 RWD 的運作原理就是使用CSS3的 Media Queries ，以＠media這個屬性定義當螢幕解析度(寬度)大於或小於所設定的數值時，所被定義的網站元素物件所呈現的背景顏色、文字大小、不顯示該物件等等規則，這個屬性也就是 RWD 網頁設計最核心的思想，讓網站能夠遵循指令根據顯示螢幕的大小自動調整內容。