RWD是什麼？響應式CSS怎麼寫？5分鐘快速指南！ - Welly SEO

RWD CSS語法如何使用？AWD又是什麼？除了解釋「RWD SEO」之間的關聯，本文還提供響應式網頁範例與工具給大家參考。

... SEO搜尋引擎最佳化完整教學） ... 服務方案成功案例行銷知識SEO優化數位行銷關於我們聯絡我們Openmainmenu首頁SEO優化RWD是什麼？響應式CSS怎麼寫？5分鐘快速指南！RWD是什麼？響應式CSS怎麼寫？5分鐘快速指南！WellySEO編輯部2022-02-23發佈SEO優化#SEO優化#技術SEO#SEO做法RWD意思是什麼？響應式網頁與傳統設計又有什麼區別？RWDCSS語法如何使用？AWD又是什麼？除了解釋「RWDSEO」之間的關聯，本文還提供響應式網頁範例與工具給大家參考。

快速跳轉目錄RWD響應式網頁是什麼？為什麼大多網站都使用了RWD？(一)RWD意思在中文翻譯上代表什麼？(二)RWD與傳統網頁設計有什麼不同？(三)使用RWDSEO排名會變好的原因RWDCSS怎麼寫？(一)響應式網頁尺寸大小分別是多少？(二)響應式網頁CSS語法分享RWD開發工具（Framework）與響應式網頁範例(一)Bootstrap(二)Foundation(三)Pure(四)Bulma(五)UiKit(六)看看別人怎麼做！3大著名響應式網頁範例參考AWD是什麼？跟RWD差別在哪？(一)AWD意思、定義是什麼？RWD響應式網頁是什麼？為什麼大多網站都使用了RWD？智慧型手機的出現掀起了一波科技革命，聯繫、上網、購物，通通可以用手指搞定！根據2020下半年市調顯示[1]： 台灣整體上網率為85.3%，10～49歲的平均上網率甚至達95%以上 智慧型手機持有率為88.4%；平板電腦為42.3% 使用手機上網比例有83.6%，平板24.5%，卻僅有53.3%使用電腦上網 當全世界的生活型態因為多元的媒體設備被改變時，傳統的網站顯示型態也漸漸走向黃昏，如果你曾使用不同裝置上同一個網站，發現明明一樣的內容，但呈現的長相卻不太相同，那麼你就意識到RWD響應式網頁的存在啦！還是不太明白RWD是什麼的人，底下會有更詳細的說明！(一)RWD意思在中文翻譯上代表什麼？RWD是響應式網頁英文簡稱，全名為ResponsiveWebDesign，又有「響應式網頁設計、對應式網頁設計」等中文翻譯。

響應式網頁意思具體來說，是一種讓網頁可以在不同大小、解析度的裝置螢幕下（例如桌上型電腦、筆電、手機、平板等）自動改變排版佈局的技術名稱。

這個名詞是2010年時由EthanMarcotte在網頁設計文章中所提出的概念[2]，因為他發現，即便一開始視覺排版設計精良，但當呈現在各式各樣寬度的網裝置上時，可能會因為比例而出現裁切及難以辨認的情況，為了適應潮流與科技，網頁設計必須要能更靈活的運用。

CSS因為能在同一個HTML的文本當中解決不同螢幕寬度這項問題，所以成為響應式網頁設計中很重要的程式語言。

EthanMarcotte的這套觀點在2012年被《.net雜誌》列為頂級網頁設計趨勢的第2名，後來也漸漸變成全球公認的網頁開發技術趨勢，直到現在已經相當普遍且成熟，所以如果你還不清楚響應式網頁設計是什麼，可得要加緊腳步囉！(二)RWD與傳統網頁設計有什麼不同？★傳統網頁設計 傳統網頁設計比較接近「因地制宜」，設計師會先針對不同類型的閱讀裝置「額外」做符合該規格的網頁，並統一提供給伺服器，當使用者進入頁面時，由伺服器判斷是透過哪種裝置連進來的，再抓出適合該裝置的網頁版本顯示。

最快速辨別是否為傳統網頁設計，只要進入手機版頁面網址呈現跟電腦版不同，例如https://m.abc.com，比起原網站https://abc.com多了個m（mobile意思）。

因為有幾個裝置就做幾個網頁，所以傳統網頁設計有不少麻煩之處： 網頁設計、製作的人力與資源成本都相當高 只要有修改或調整，就必須一一改動所有頁面，維護不易 伺服器沒有判斷好，或者直接點擊特定裝置連結，會顯示出錯誤的頁面，影響體驗 網址重複多次，可能會影響到權重及SEO搜尋排名 ★響應式網頁設計RWD 相比之下RWD透過HTML的程式語言下達指令，只需要1個網頁、1個網址就能適用所有裝置，在網頁製作、維護的功夫，以及網址分散權重的影響就沒有那麼大，不過在前期設計與製作網頁時，會需要花比較多的功夫去規劃，畢竟一次要考慮到3種以上的比例呈現，在圖文、LOGO排版上需要多費些心思。

我們可以用圖片來看伺服器與HTML如何運行的： 整體來說，RWD的效果與體驗都是大於傳統網頁設計的，唯一1項傳統式可能會略勝一籌的是「網頁速度」，因為傳統設計是分割成不同的獨立頁面，載入的速度會比載入全部內容快，不過這點差距RWD是有機會彌補的，只要好好優化圖片、功能等，對網站的影響不至於太大。

傳統網頁設計應式網頁設計網址與頁面數量多個網頁+網址單一頁面+單一網址開發成本較高較低維護狀況不容易容易對SEO影響權重容易分散，容易被判定內容或架構重複單一網址、頁面，較利於SEO排名載入速度較快中等(三)使用RWDSEO排名會變好的原因 1.連結單一 單一連結其實很關鍵，不會因為用戶使用不同裝置進入而分散人潮流量，民眾如果有需要轉發網址也更便利，更不會發生用電腦點擊連結之後卻出現手機版的尷尬情況，在建立反向連結時也更能集中火力，久而久之連結的排名就有機會往上囉！ 2.跳出率較低 試想點進一個網頁發現瀏覽非常不方便，要不斷放大縮小或滑動才能看完整行字，是不是很快就想放棄了？當所有使用者都只看一眼就決定離開，跳出率大幅增加的情況下，搜尋引擎可能會判定這個網頁的內容是用戶不喜歡或沒有幫助的，長久下來對排名就容易有不好的影響，但RWD會自動調整，在閱讀順暢的情況下，更容易留住造訪者。

3.提升體驗及品牌形象 不同的設計頁面，可能會導致資訊更新時有缺漏或錯誤，如果資訊放置的入口改變，也有可能會變成用了手機版之後卻找不到原本網頁版內的內容，這不僅影響到閱讀體驗，連帶也會影響用戶對網站及整個品牌的形象跟評價；而RWD的視覺、使用效果都更為清晰，不容易有上述那些問題。

4.符合所有使用者的搜尋習慣 有網頁設計的人員可能也會考慮直接做成APP，但大部分的使用者還是習慣透過網頁搜尋來獲得答案，畢竟使用APP還需要下載，容易造成不便，而且在製作上也還要分成Android與iOS版本，除了花費高之外，並沒有符合大眾習慣；RWD是很靈活且有彈性的網頁，也更符合使用者的需求。

5.Google喜歡這個趨勢 Google搜尋中心曾在某篇文章中提到建議大家使用RWD網頁設計的原因： 使用者可以更輕鬆的使用單一網址分享及連結到網站內容。

可協助Google演算法為網頁正確指定索引編列屬性，不需要發送訊息指明既有的相對應桌面版或行動版。

不需要同時維護多個相同內容的網頁，大幅減少工程師的處理時間。

可以降低行動版網站發生常見錯誤的機率。

使用者不需要重新導向就能瀏覽合適的畫面，縮短載入時間；此外也可以降低重新導向出錯的機率。

Googlebot只要檢索這些網頁1次，即可擷取所有版本的內容，提高檢索效率同時也能間接協助Google建立索引，並確保擷取的內容是最新版本。

畢竟原本就是以使用者體驗為出發點，且實際上也確實提供更高的便利性，因此對搜尋引擎來說是樂見其成的，再加上綜合上述4點，都是原本就對SEO排名有影響的因素，因此用RWD來優化網站可說是聰明又實惠的選擇。

（延伸閱讀：SEO是什麼？SEO優化怎做？SEO搜尋引擎最佳化完整教學）RWDCSS怎麼寫？在進入響應式設計範例前，有些比較基本的RWD設計原則先提供給大家知道，對於後續的設定與撰寫上都會更加順利。

(一)響應式網頁尺寸大小分別是多少？雖然是讀取同一個網頁，但在CSS指令中要針對個別裝置明確寫出尺寸大小，以下為RWD常用的3個裝置解析度： 桌上型電腦：至少要1024px以上 平板電腦：720px～1024px 手機：320px～720px (二)響應式網頁CSS語法分享1.設定媒體查詢 媒體查詢的設定可幫助網站判斷在什麼寬度、高度的裝置上要套用何種網頁模式，通常會以視區的寬度為主，畢竟這是最直接影響網頁呈現的指標。

常見的項目有這些： width：視區寬度 height：視區高度 device-width：裝置寬度 device-height：裝置高度 orientation：裝置寬高比 aspect-ratio：視區寬高比 color：視區顏色 撰寫範例如下： 2.添加斷點 一般網頁的兩側會有不同欄位及相對應的功能，但同樣的設計套用在手機上，使用就會變得不太方便，如何從「多向道」變成「單向道」？你可以利用添加斷點把桌面版的內容集中顯示在手機上。

撰寫範例如下： ★備註：當瀏覽器螢幕小於768px時，每列的寬度應為100%。

3.以手機版為優先 考慮到手機裝置的使用比率較高，我們可以把手機設定為優先載入頁面，這樣有助於縮短網頁載入的時間，讓體驗更順利。

撰寫範例如下： 4.HTML行列數顯示設定 延續上述範例： 5.常用的設備斷點 因為民眾可能使用的設備寬、高種類可能有非常多種，網站很難幫每一種都設定斷點，建議可以使用下列這5種比例，讓網頁可以適用於大部分的裝置。

撰寫範例如下： 6.設定不同裝置的顯示方向：縱向或橫向 假設我們設定當網頁處於橫向模式時，背景會變成淺藍色，撰寫範例如下： 7.隱藏元素 假如在裝置改變時想要將某些元素隱藏起來，避免畫面過度凌亂或影響載入速度，撰寫範例如下： 8.改變不同裝置的字體大小 撰寫範例如下： （資料來源：W3Schools）RWD開發工具（Framework）與響應式網頁範例如果本身有強大的網頁設計與工程團隊，想從頭到尾量身打造專屬的響應式網站，那當然沒什麼問題，但如果想要更快速更有效率的搭建RWD，其實可以善用響應式網頁模板工具，只要蒐集好素材套上框架，再根據個人需要微調即可。

線上的相關工具不少，以下跟大家介紹5個常見的網站及其提供的RWD網頁範例，希望大家可以從中找到最符合心中所想的響應式網頁排版模組喔！(一)BootstrapBootstrap是目前網頁設計人員在製作響應式網站時最熱門的首選！它的操作便利，有大量握CSS、Javascript等模組與物件，還有自己開發的SVG圖庫，是使用上相對靈活的RWD開發工具。

(二)FoundationFoundation擁有豐富的功能與HTML、CSS和JavaScript等模板，可幫助使用者快速構建以內容為主、手機版為優先的網站原型，另外還能協助製作可在任何設備上隨處閱讀的響應式HTML電子郵件。

(三)PurePure提供數量多、占用空間小的CSS語法模組，適合想客制化自家網站的使用者，通過使用Grids、Menus等，可以輕鬆幫所有螢幕尺寸創建漂亮的響應式網站。

(四)BulmaBulma是一個免費的框架，它提供了許多現成的前端組件，你可以用最簡單、最輕鬆的方式快速組合這些組件來建構RWD網站的界面。

(五)UiKitUiKit是一個用法簡易和模組多元的前端框架工具網站，用於開發快速而強大的響應式網站界面。

(六)看看別人怎麼做！3大著名響應式網頁範例參考1.Shopify Shopify在所有大小的設備顯示幾乎都有保持一致性，而且操作排版上非常清晰明確，雖然網頁上使用大量圖片，甚至還有動態影像，不過他們仍有將頁面加載速度保持在5秒內，在內容與速度之間取得絕妙平衡。

2.SmashingMagazine 在電腦與手機裝置上分別以兩欄和單欄布局顯示的SmashingMagazine，巧妙結合文字與按鈕，讓使用者在操作能更加直觀，也具有強烈的引導效果，最重要的是，即使用3G網路連結設備，加載頁面速度也只需2秒，有效降低他們網站的跳出率。

3.Dropbox Dropbox在元素的排版使用上非常靈活，在不同裝置上呈現出的視覺效果都很出色，多欄到單欄的轉換過程也流暢又平穩。

AWD是什麼？跟RWD差別在哪？在研究RWD時很容易看到另一個名詞「AWD」，你是否也好奇AWD是什麼？同樣是網站設計領域的專有名詞，為什麼最後掀起熱潮的是RWD？(一)AWD意思、定義是什麼？AWD是「自適應式網站」的英文簡稱，全名為AdaptiveWebDesign，也是一種響應式網站的設計方式。

手機、桌機網址，可以做到完全一樣。

不同的裝置開啟時，會先判定裝置是哪一種，來給予不同的CSS，進而改變排版。

大致上AWDRWD概念相同，都是使用CSS設定同一個網站與網址，並透過自動偵測使用者裝置的模式提供對應排版的網頁，唯一的差別是：AWD可以減少網頁在不同裝置上的內容或元素。

例如：覺得電腦版的符號、圖片或文字在手機小螢幕的呈現太過擁擠累贅，AWD是可以做到讓電腦裝置擁有網站全部元素、手機裝置只呈現網站70%內容、元素的。

這樣的做法可以讓行動端裝置在載入網站時的速度加快，不過AWD在前期的設計規劃及製作需要產出很多版本後再進行整合，不只開發較複雜、成本較高，後續的資料管理與網站維護也比較麻煩，所以熱門度沒有RWD這麼高。

AWDRWD網址與頁面數量單一頁面+單一網址單一頁面+單一網址不同裝置的呈現內容可不同相同複雜度與開發成本較高較低後續維護狀況較麻煩容易載入速度較快中等 至於要選擇AWD還是RWD，可能要看網站最後的樣貌，如果沒有額外的缺點，技術使用也很完整，其實兩者在SEO排名的影響差不多，可以依照個人需要選用。

以上是RWD響應式網站的相關資訊，如果您喜歡我們的文章歡迎分享，若有其他與SEO相關的問題也可查看其他文章，若想進一步了解Welly的服務，歡迎點擊下方立即諮詢按鈕，將有專人免費為您服務！ 參考資料 [1]Yahoo：市調解析－2019至2020年台灣網路行為趨勢觀察與比較 [2]Alistapart：ResponsiveWebDesign最值得擁有的專業行銷團隊！現在就與Welly一起透過SEO優化提升業績吧！立即諮詢熱門文章SEO優化2022-07-11SEO是什麼？2022SEO搜尋引擎優化入門指南！SEO是什麼？SEO優化怎麼做？為什麼GoogleSEO很重要？良好的網站排名效果能帶來多少好處？讓SEO行銷專家從概念、定義到優化SEO，教你如何SEO搜尋引擎優化怎麼做！繼續閱讀SEO優化2022-06-242022SEO新手懶人包！公開業界不敢說的SEO祕訣！SEO是個專注優化搜尋引擎排名的技術，可分為網站內部與外部優化（OnPageSEO／OffPageSEO），牽涉到技術、內容與持續維護，身為以客戶業績為己任的SEO服務商，這篇精華從SEO是什麼、SEO優化技術到SEO工具，不藏私通通告訴你！繼續閱讀SEO優化2022-03-222022SEO公司推薦！SEO排名價格、7大簽約重點解析SEO公司提供什麼服務？SEO公司推薦怎麼選？跟我們一起快速了解SEO優化關鍵、SEO排名價格、SEO報價行情與台灣SEO公司收費標準，並教你如何判斷好SEO公司，幫助你選擇合拍的事業夥伴！繼續閱讀SEO優化2022-03-21內容行銷是什麼？4大經典內容行銷案例看內容行銷定義內容行銷（內容行銷英文ContentMarketing）是什麼？跟傳統廣告差在哪？內容行銷怎麼做？能帶來多少好處？本文帶你從概念、管道、方法看內容行銷策略，同時分享4大成功的內容行銷案例。

繼續閱讀SEO優化2022-03-14跳出率、離開率區分！電商跳出率高？教你10招SEO優化！跳出率（英文：Bouncerate）是網站分析的重要指標之一，但跳出率多少正常？跳出率高怎麼設法降低？本篇將介紹跳出率定義，解釋跳出率、離開率差異，並教你思考跳出率含義及10個優化跳出率方法！繼續閱讀SEO優化2022-03-07【關鍵字排名優化秘訣】用關鍵字行銷衝SEO關鍵字排名關鍵字行銷對SEO有多重要？關鍵字排名優化只能挑搜尋量高的字？廣告Google關鍵字費用怎麼算？如何操作？文中通通有解！另附Google年度關鍵字排行榜，快一起來瞧瞧！繼續閱讀SEO優化2022-03-04GoogleSearchConsole教學，掌握4點快速安裝與使用！GoogleSearchConsole是什麼？GoogleSearchConsole是SEO人必不可少的工具，網站剛起步、想獲取高排名的你，千萬別錯過這篇GoogleSearchConsole教學！本篇包含基礎GoogleSearchConsole驗證、功能簡介和進階GoogleSearchConsole關鍵字挖掘法。

繼續閱讀SEO優化2022-02-14長尾關鍵字是什麼？定義、教學步驟、免費SEO工具統整！長尾關鍵字可不是字數長的關鍵字，而是低搜尋量、數量龐大的關鍵字組，具有高流量與轉換潛力！如何找長尾關鍵字？別錯過這篇長尾關鍵字定義、例子、長尾關鍵字工具和查找方法！繼續閱讀SEO優化2022-02-14工作階段是什麼？GA定義、計算和修改設定3分鐘上手！工作階段意思是什麼？為什麼網站流量看工作階段，不是看使用者、網頁瀏覽量？本篇文章從工作階段定義、工作階段逾時計算規則，到調整工作設定逾時教學，一篇通通告訴你！繼續閱讀編輯精選SEO優化2022-07-11SEO是什麼？2022SEO搜尋引擎優化入門指南！SEO是什麼？SEO優化怎麼做？為什麼GoogleSEO很重要？良好的網站排名效果能帶來多少好處？讓SEO行銷專家從概念、定義到優化SEO，教你如何SEO搜尋引擎優化怎麼做！繼續閱讀SEO優化2022-06-242022SEO新手懶人包！公開業界不敢說的SEO祕訣！SEO是個專注優化搜尋引擎排名的技術，可分為網站內部與外部優化（OnPageSEO／OffPageSEO），牽涉到技術、內容與持續維護，身為以客戶業績為己任的SEO服務商，這篇精華從SEO是什麼、SEO優化技術到SEO工具，不藏私通通告訴你！繼續閱讀SEO優化2022-06-15SEM行銷很花錢是真的嗎？搜尋引擎行銷怎麼做最好？SEM是什麼？SEOSEM有什麼不同？網路SEM廣告很難做嗎？哪些類型的Google廣告會出現在搜尋引擎上？SEM推薦找廣告公司代操嗎？SEM相關疑難雜症的解決方式通通在這裡喔！繼續閱讀數位行銷2022-05-31CPC/CPA/CPM/PPC/ROI/ROAS是什麼？常見行銷術語整理CPC/CPA/CPM廣告的廣告費用怎麼算？PPC/CTR/CVR是什麼意思？ROAS/ROI有什麼不同？CPL/CPI/CPR/CPE這些少見的行銷術語指的又是什麼？讓我們一次為您解決這些問題！ 繼續閱讀數位行銷2022-04-25GA分析是什麼？2022最好懂的GoogleAnalytics教學！GA分析是什麼？GoogleAnalytics怎麼用？Google分析好困難，想找GA教學卻苦無門路？別擔心，從GA追蹤碼設定到GA報表怎麼看，不可錯過的GoogleAnalytics教學就在這裡！繼續閱讀SEO優化2022-04-18SEO工具怎麼選？30種SEO分析工具詳盡介紹！SEO工具有哪些？SEO排名軟體怎麼選？本文為你帶來最完整的SEO優化工具介紹，關鍵字規劃工具、排名工具、反向連結工具一把抓，從此做SEO再也不困難！繼續閱讀最新文章SEO優化2022-08-01主題群集（TopicCluster）全攻略！4步驟提升網站排名主題群集（TopicCluster）是什麼？PillarContent跟ClusterContent的關聯是？為何要了解蜂鳥演算法？超連結是為了？這篇文章帶你一次掌握主題群集的全貌！ 繼續閱讀SEO優化2022-07-25WordPressSEO必學！YoastSEO外掛設定一把罩！WordPressSEO是什麼？WordPressSEO優化又要如何去執行呢？想知道熱門外掛程式YoastSEO有哪些特點以及學最完善的YoastSEO教學嗎？趕快和我們一起往下看！繼續閱讀SEO優化2022-07-25robots.txtV.S.metarobots！robots.txt測試工具教學一次看！robots.txt是什麼？程式碼怎麼寫？與metarobots有什麼不同？要怎樣使用robots.txt測試工具才能準確跟Google爬蟲溝通？不論設定與撰寫，本篇都有完整概念與教學。

繼續閱讀SEO優化2022-07-25GoogleSEO重要嗎？不投廣告就能帶來更多流量與訂單！GoogleSEO怎麼做？Google排名和Google網站評分如何提升？GoogleSEO演算法有哪些？最好懂的GoogleSEO教學，以及GoogleSearchConsole教學，看這篇就夠！繼續閱讀數位行銷2022-07-25口碑行銷怎麼做？5分鐘搞懂如何用口碑贏得超高討論度口碑行銷要怎麼做？品牌和店家有良好的口碑，才能吸引客戶。

那口碑意思又是什麼？如何做口碑？有可參考的口碑行銷案例嗎？今天要來帶大家揭開對口碑行銷的所有謎團！ 繼續閱讀SEO優化2022-07-25MetaTitle、MetaDescription如何優化？SEOMeta概念全公開！MetaTitle跟MetaDescription怎麼寫？MetaTag是什麼？MetaKeywords還有效嗎？提升SEOMeta排名方法大揭露，看完不用再擔心網頁標題、描述怎麼寫！繼續閱讀聯絡我們聯絡我們