什麼是RWD響應式網頁設計？圖解說明讓你3分鐘搞懂手機版網站
RWD網頁設計(又稱響應式網頁設計)已經出來幾年了，但常常還是有客戶詢問什麼是RWD網頁設計？因此我們做了幾張圖，希望能用看圖說故事的方式，讓大家快速了解什麼是RWD網頁設計，以及RWD網頁設計的特性。
目錄
什麼是RWD響應式網頁設計？RWD是什麼意思？
RWD，英文原文為Responsive Web Design。RWD的中文意思是響應式網頁設計(也有人稱之為自適應網頁設計，或是回應式網頁設計) 。RWD響應式網頁設計是一種網頁前端技術的作法，透過瀏覽器寬度進行版面控制，讓網站在不同的裝置間保持正常運作。
用白話文來說，RWD的意思是指在同一個網址中，網頁可因應不同裝置寬度(電腦、平版、手機)可自動產生不同的版面變化的網頁技術。
Responsive Web Design (RWD) 這個詞是在2010年由Ethan Marcotte發明的術語。在2012年後逐漸被推廣，並在近幾年成為網頁設計的趨勢。在網頁中使用CSS，以百分比的方式及彈性的畫面設計去呈現。在不同的解析度或是不同的行動裝置設備寬度下，自動改變網頁的排版，讓使用者都可以正常瀏覽網頁，提供最好的瀏覽體驗。基於以上的優勢，許多網站也都開始使用RWD去設計網頁。然而這種設計方式比較複雜，同時要考慮網頁在不同裝置所呈現的方式，因此需要較多的時間去撰寫網頁與調整版面設計。
為什麼網站一定要RWD？RWD響應式網頁就是手機版網頁？
有RWD的網頁，版面配置會自動跟著桌電/筆電/手機不同的裝置自動調整，讓網頁符合各裝置的操作習慣。當你的網站沒有符合RWD響應式，你的潛在客戶如果用手機上網，可能看都不看就直接關掉網頁。
有很多人直接把RWD網頁叫手機版網頁，但其實手機版網頁和RWD網頁是不一樣的東西。單純的手機版網頁是只能在手機上正常運作，把手機版網頁的網址傳到電腦上，就會看到比例不一致的畫面。而RWD網頁則沒這個問題，在RWD網頁所使用的網址，在不同的裝置中都可以正常顯示。
採用RWD響應式網頁設計的6個常見問題及範例介紹
RWD響應式網頁如何在電腦和手機裝置間做切換？
為了適合不同尺寸的螢幕，必須將網頁的版面設計成可以像樂高積木一般自動變換區塊尺寸和位置，橫向排列自動變成直向排列。也因此，RWD網頁大部份就會長得像樂高積木，成為塊狀的版面設計。
如果沒有RWD，網頁畫面會有什麼差別？
沒有RWD的網頁，在手機上會看到像左圖這樣，必須不斷用手指頭在手機上不停地放大縮小，才能看清楚文字內容。
有RWD的網頁，在手機上看到的畫面則會像右圖，各區塊會依設定的比例做區塊切換，不需手指放大就可以清楚網頁文字。
RWD網頁設計範例：博來科技企業形象網站
無RWD的傳統網站範例：雷祥生技企業網站
如何知道這個網頁有沒有符合RWD規範？
要判斷這個網頁是不是RWD網頁，最簡單的方式就是直接改變瀏覽器寬度，看看它的版面會不會在特定尺寸有所變化。
RWD網站範例：HarvestOne品牌形象網站
在編輯網頁時，後台管理者也要懂RWD響應式網頁嗎？
其實後台編輯的網頁不會自動RWD。不過，透過簡單的rwd css code還是可以讓你的文章內容符合RWD的規範。也因此，設計得太過花俏的網頁，對於日後的編輯維護會有困難。
RWD網站範例：瑞獅安全帽官網設計
在RWD響應式網頁設計中遇到表格該怎麼處理？
雖然網路上也有許多RWD表格範例可以實現Table表格也支援RWD自適應效果，但其實表格很難在小小的手機中完整呈現。對於太過複雜的表格(例：產品規格)，建議直接做成PDF文件檔，在手機上可點開PDF檔後，用手指滑動放大查看資料。如果是有資料庫的產品列表，則可以寫成網頁程式自動讓它RWD。
RWD網站範例：GoodSky形象網站設計
網頁中的影片要如何讓它也RWD？
在後台編輯時，嵌入youtube影片也是不會自動RWD的，要在網頁原始碼加上RWD樣式碼，才讓影片真正RWD以等比縮放的方式符合視窗寬度。
RWD網站範例：中國附醫線上學習平台
RWD要怎麼做？介紹3個熱門的響應式網頁設計開發工具
RWD網頁的開發通常是在Framework上進行開發，目前市場上有3種最熱門的RWD開發工具，分別是Bootstrap, Foundation, Pure。以下簡單介紹各種開發工具的特點，供大家參考。
1.Bootstrap
Bootstrap是由Twitter開發，包含Javascript、CSS等...相關檔案，是自由度高、也是目前最多人使用的RWD開發工具。
2.Foundation
Foundation是由ZURB出品的RWD開發工具，以Mobile First為設計原則，適合以Mobile為優先考量的網站。
3.Pure
Pure是由Yahoo推出的RWD網頁開發架構，單純只使用CSS，適合大量客制化的網站。
以上是RWD網頁設計的說明，希望能讓你對RWD響應式網頁設計有充份的了解。
延伸閱讀：10個RWD網頁範例，讓你了解「響應式網頁設計」的特點
延伸閱讀：客製化網頁、套版網頁有何差異？客製化網頁設計的3大優點
＊ 歡迎分享這篇文章，分享時請務必加入文章來源：凱士網頁設計公司
 |
Eric Wang 凱士網頁設計公司 專案經理 Eric，擁有設計與理工背景，擅長和行銷、業務、管理、資訊、設計等專業人員進行跨領域溝通，樂於分享與討論，長期致力於網頁設計白話文運動。
|
