什麼是RWD響應式網頁設計？圖解說明讓你3分鐘搞懂手機版網站

RWD，英文原文為Responsive Web Design。

RWD的中文意思是響應式網頁設計(也有人稱之為回應式網頁設計) 。

RWD響應式網頁設計是一種網頁前端技術 ... 網頁設計作品網頁設計產業分類ALL上市櫃公司集團官網產品代工公司網站生產設備公司網站加工技術公司網站客製服務公司網站生技醫療公司網站消費零售品牌官網學校教育單位網站宗教文化事業網站網頁設計服務分類ALL形象網站企業網站客製化系統平台RWD網頁設計多國語言版本商品及形象拍攝網路行銷優化最新網頁設計作品酷柏團購電商平台720運動眼鏡品牌電商達洛維門窗形象官網設計ChenSource企業官網設計Klaymor形象官網設計通嘉科技集團網站設計LEX企業官網設計HarvestOne品牌形象網站認識網站設計洽詢網站報價前有哪些準備事項？網站製作會如何進行？有哪些流程？RWD響應式網頁設計是什麼意思？形象拍攝為什麼可以提昇網站價值？CMS網站後台有什麼行銷優勢？網站完成後如何進行SEO優化工作?RWD網頁設計什麼是RWD響應式網頁設計RWD響應式網頁設計作品案例RWD響應式網頁設計的趨勢與特點網頁設計服務形象網站設計企業網站設計客製化網站系統網站設計流程網站設計費用設計專欄網站企劃討論網站之前的5個準備工作官網設計有哪些重點？網站製作有哪些流程？公司網站要規劃哪些內容？網站架構表(範例檔下載)>>所有網站企劃文章網頁設計如果沒有RWD，手機版網頁會如何呈現？RWD常見的設計形式企業網站有哪些新的設計趨勢？透過攝影提昇網站質感>>所有網頁設計文章網站建置CMS系統建置網站有什麼好處？客製化、套版網頁設計比較網站建置重點工作網站改版前項目檢查>>所有網站建置文章數位行銷網站行銷SEO入門網站後台有哪些必備的SEO工具？SEO文章要怎麼寫？企業網站SEO網頁設計重點搜尋引擎優化初學指南>>所有數位行銷文章聯絡我們 2020-06-01 EricWang 什麼是RWD響應式網頁設計？圖解說明讓你3分鐘搞懂手機版網站 RWD網頁設計(即響應式網頁)已經出來好幾年了，但還是有很多人詢問什麼是RWD網頁設計？跟手機版網站有什麼不同？其實RWD網頁就包含了電腦版和手機版網頁。

我們做了幾張圖，希望能用看圖說故事的方式，讓大家快速了解什麼是RWD網頁設計，以及它的相關特性。

  目錄RWD是什麼意思？什麼是RWD響應式網頁設計？沒有RWD的網站，在手機和電腦會如何呈現網頁？RWD和AWD有什麼差別？響應式網頁設計的常見問題RWD響應式網頁如何在電腦和手機裝置間做切換？如何在電腦上查看手機版網頁有沒有RWD？在編輯網頁時，後台管理者也要懂RWD響應式網頁嗎？在RWD響應式網頁設計中遇到表格該怎麼處理？網頁中的影片會自動RWD嗎？採用RWD的手機版網站，在網頁設計上有哪些注意事項？RWD要怎麼做？3種網頁設計公司常用的RWD開發架構1.Bootstrap2.Foundation3.Pure   RWD是什麼意思？什麼是RWD響應式網頁設計？ RWD，英文原文為ResponsiveWebDesign。

RWD的中文意思是響應式網頁設計(也有人稱之為回應式網頁設計) 。

RWD響應式網頁設計是一種網頁前端技術的作法，在同一個網址中，網頁可因應不同裝置寬度(電腦、平版、手機)可自動產生不同的版面變化，讓網站在不同的裝置間保持正常運作。

用白話文來說，RWD的意思是指透過瀏覽器寬度決定網頁版面呈現的一種網頁技術。

  ResponsiveWebDesign(RWD) 這個詞是在2010年由EthanMarcotte發明的術語。

在2012年後逐漸被推廣，並在近幾年成為網頁設計的趨勢。

技術上來說，RWD是在網頁中使用CSS語法來決定網頁版面的呈現方式，大部份是將網頁圖片或區塊以百分比的比例方式呈現畫面。

RWD可以在不同的解析度或是不同的行動裝置設備寬度下，讓網頁自動改變畫面排版，提供使用者在跨裝置中得到最佳的瀏覽體驗。

基於以上的優勢，許多網站也都開始使用RWD去設計網頁。

然而這種設計方式比較複雜，同時要考慮網頁在不同裝置所呈現的方式，因此需要較多的時間去撰寫網頁與調整版面設計。

      Apple官網採用RWD響應式網頁技術（https://www.apple.com/tw/）在手機和電腦裝置上自動切換版面呈現   延伸閱讀：AWD網頁是什麼？3招教你RWD與自適應網頁的差別！           沒有RWD的網站，在手機和電腦會如何呈現網頁？ 有RWD的網頁，版面配置會自動跟著桌電/筆電/手機不同的裝置自動調整，讓網頁符合各裝置的操作習慣。

當你的網站沒有符合RWD響應式，你的潛在客戶如果用手機上網，可能看都不看就直接關掉網頁。

  沒有RWD的網頁，在手機上會看到像左圖這樣，選單文字過小、無法清楚閱讀內容。

必須不斷用手指頭在手機上不停地放大縮小，才能看清楚文字內容。

無RWD的傳統網站範例>>   有RWD的網頁，就相當於是有手機版網站，在手機上看到的畫面則會像右圖，各區塊會依設定的比例做區塊切換，不需手指放大就可以清楚網頁文字。

有RWD的網站設計範例>>          RWD和AWD有什麼差別？   跟RWD概念容易混洧的另一個網頁技術是AWD。

AWD其實是較早的手機裝置網頁呈現的解決方案，然而較近期出現的RWD網頁跨平台技術，除了補足AWD的部份缺點外，也逐漸成為主流的跨平台技術。

    RWD和AWD快速比較    RWD AWD 中英文全名 響應式網頁設計 （ResponsiveWebDesign） 自適應網頁設計 （AdaptiveWebDesign） 出現年代 較近期 較早期 網址 電腦版和手機版都統一用www網址 依電腦版和手機版分成www及m兩個網址 適用對象 企業網站、形象網站、品牌網站。

架構龐大、工程複雜的系統型網站平台。

    延伸閱讀：什麼是AWD網頁設計？       響應式網頁設計的常見問題 很多人以為RWD就是像電視一樣，一段影片可以在不同的電視尺寸播放。

但實際上，網頁的組成可比電視影片複雜多了。

一個影片只需要一個長寬比例，但一個網頁可能會有數十到數百個長寬比例，每個網頁元素(圖片、文字、表格)都有個別的長寬比例問題要在RWD裡面個別處理。

因此畫面上的網頁元素越多，RWD工作的複雜度就越高。

下面就讓我們來看一下，在網頁設計的過程中，RWD有哪些常見的問題需要克服。

      RWD響應式網頁如何在電腦和手機裝置間做切換？ RWD網頁設計與傳統網頁設計在外觀設計上就有很大的不同。

為了適合不同尺寸的螢幕，RWD網站逐漸發展成像樂高積木一般區塊式的設計，這是為了較容易讓電腦版網頁各區塊切換成直式手機版的畫面。

因此，在網頁設計的過程中，必須隨時考量網頁在各種RWD的情境下所需要因應的各種版面配置。

          如何在電腦上查看手機版網頁有沒有RWD？ 有人誤以為在網站畫面會自動等比縮小到手機就是RWD，其實這是沒有RWD的網站正常的反應。

如果你的網站文字在手機會小到看不清楚，那麼這個網站其實沒有符合RWD。

如何判斷你的網站有沒有RWD？如果你正在使用電腦，想了解這個網頁是否有RWD網頁，最簡單的方式就是直接改變瀏覽器寬度，看看網頁有沒有什麼變化。

  看看你的網站： 網頁版面在手機尺寸時會不會自動調整？ 手機上的文字是不是清楚可讀？ 版面配置會不會從橫式的自動調整為直式的？   如果這幾點的答案為「是」，那麼你的網站應該是有RWD的。

  RWD網站範例：HarvestOne品牌形象網站       在編輯網頁時，後台管理者也要懂RWD響應式網頁嗎？ 由於網站後台編輯器本身並不具備RWD的編輯功能，後台編輯的作法也會跟著前台網頁畫面設計的呈現方式有關，因此後台維護人員也需要了解基本的RWD概念，在維護網頁內容的同時，也需要同時思考RWD網頁呈現的問題。

對非網頁設計背景的維護人員來說，表格(table)是一種看得到也容易調整區塊的呈現方式，透過表格設定就可以控制RWD網頁區塊的比例和位置，讓你的文章內容符合RWD的規範。

  RWD網站範例：瑞獅安全帽官網設計          在RWD響應式網頁設計中遇到表格該怎麼處理？ 由於手機畫面太小，表格很難在手機上完整呈現。

一般來說，表格在RWD有兩種常見的作法。

1.方法一：套用表格CSS樣式。

可以採用表格RWD效果的方式，但不論用哪種作法，在手機小小的螢幕中都很難完整呈現。

從另一方面來說，手機本來就不如電腦大螢幕可以用來瀏覽大量的資料，用手機只是用來快速查看資料。

2.方法二：直接把表格做成PDF檔。

對於太過複雜的表格(例：產品規格)，建議直接做成PDF文件檔，在手機上可點開PDF檔後，用手指滑動放大查看資料。

  PDF使用在RWD網站的範例：GoodSkyRWD網站設計         網頁中的影片會自動RWD嗎？ 不會。

網頁中的Youtube影片通常是採用iframe的方式嵌入的，預設都是採用固定寬度的方式呈現，因此若直接嵌入Youtube影片，通常在手機上只能看到出現一半的影片畫面。

這個時候，可以請網站公司額外加寫讓iframe自動RWD的CSS樣式，套用樣式後就可以讓嵌入網頁的youtube影片自動RWD，影片尺寸會跟著螢幕尺寸自動調整。

或是在CMS網站系統安裝iframe外掛，讓影片自動RWD。

  RWD網站範例：中國附醫線上學習平台         採用RWD的手機版網站，在網頁設計上有哪些注意事項？             RWD要怎麼做？3種網頁設計公司常用的RWD開發架構 RWD網頁的開發通常是在Framework上進行開發，目前市場上有3種網頁設計最熱門的RWD開發工具，分別是Bootstrap,Foundation,Pure。

這三種RWDFramework各有各的支持者，並沒有說一定要用哪種架構才能開發RWD，每間網頁設計公司各有自己習慣的RWD開發架構，你可以依自己的程式撰寫習慣和喜好進行選擇。

以下簡單介紹這些開發工具的特點，供大家參考。

  1.Bootstrap Bootstrap是由Twitter開發，包含Javascript、CSS等...相關檔案，是自由度高、也是目前最多人使用的RWD開發工具。

  2.Foundation Foundation是由ZURB出品的RWD開發工具，以MobileFirst為設計原則，適合以Mobile為優先考量的網站。

  3.Pure Pure是由Yahoo推出的RWD網頁開發架構，單純只使用CSS，適合大量客制化的網站。

  延伸閱讀：RWD網頁設計公司怎麼挑？網站公司挑選守則五要點一篇整理！     以上是RWD網頁設計的說明，希望能讓你對RWD響應式網頁設計有充份的了解。

    延伸閱讀：RWD網頁設計時代，有哪些手機電腦相通的設計形式？ 延伸閱讀：客製網站和套版方案有何差異？談客製化網頁設計的3大優點 延伸閱讀：百大品牌怎麼做RWD響應式網頁？來看看大公司的手機版網站設計有什麼特色       訂閱文章 想要收到CADIIS網頁設計公司的相關訊息嗎？ 我們會不定期更新最新網頁設計相關文章，歡迎訂閱凱士知識+。

  ＊歡迎分享這篇文章，分享時請加入文章來源：凱士網頁設計公司       網站設計服務諮詢 為什麼推薦台中網頁設計公司凱士數位？位於台中的凱士相對有機會接觸到各種不同的產業面向，擁有各種產業的網站設計經驗，幫助企業提升網路品牌形象，建立良好的使用體驗。

如果您有形象網站、企業網站、客製化網頁、網站改版相關需求，歡迎聯絡我們。

  您可以直接填寫諮詢表單，或撥打諮詢電話 04-22210688           EricWang 凱士網頁設計公司專案經理Eric，擁有設計、理工、管理等跨領域背景，樂於和不同領域的專業工作者進行分享與討論。

在專案工作外，同時也兼任大學行銷系業界講師及企業內訓課程講師，長期致力於「網頁設計白話文運動」。

      網頁設計 網站建置 RWD響應式網頁設計 相關文章 網站設計公司這樣挑不踩雷！5大原則教你找到專業網頁製作 SEO新手如何進行公司網站行銷？推薦4個搜尋引擎優化的學習步驟 【公司架站必讀】推薦5個與網站公司討論的準備重點 好的形象網站設計，可以幫助公司提升品牌形象與企業價值，透過清楚的網站架構與視覺設計，造就良好的使用體驗與企業形象。

  需要網站設計服務嗎？ 凱士為您設計製作優質網站 形象網站、公司網站、企業網站、及各類型客製化網站系統平台   立即填表諮詢 首頁 / 設計專欄 / 什麼是RWD響應式網頁設計？圖解說明讓你3分鐘搞懂手機版網站 想進一步了解網頁設計服務？ 立即洽詢