回應式網頁設計(RWD)是什麼？2招方法檢查 WordPress 網站有沒有支援 RWD！

歡迎免費訂閱「Google 新聞」、追蹤「FB 粉專」、「IG」、「YouTube」、「Dcard」、「TikTok」或加入「討論社團」，並且可以透過「小額贊助」方式支持本站所有媒體持續營運！

【文章在 2022-05-28 更新過內容】

因為現今科技的發達，我們可以用許多不同的裝置來瀏覽網頁，例如電腦、平板與手機，而這幾種裝置的「螢幕大小都不一樣」，要如何保證可以在不同裝置上，瀏覽「相同」網頁時，不會因為螢幕大小不同而導致網頁體驗不佳？

這就是今天所要介紹的主題「RWD – 回應式網頁設計」，這是一種可以用一套網頁 HTML 代碼，就可以把網頁內容「完美」排版於各種裝置，不會因為螢幕大小不一樣而導致排版變形，本篇文章會介紹一下基礎概念，並且會教學如何檢查目前自己所用的 WordPress 主題是否有 RWD 的功能，一起繼續往下看吧！

延伸閱讀：【教學】2招查詢 WordPress 網站主題的方法

內容目錄 顯示

什麼是 RWD？

在電腦剛普及的時代，網頁設計只要符合電腦螢幕大小去設計即可，因為那時候的行動裝置並不發達，用於瀏覽網頁也不易閱讀、不好操作，所以大部分的網頁都只有針對電腦螢幕大小去開發。

隨著科技進步，行動裝置漸漸普及，效能跟螢幕大小也越來越適合瀏覽網頁，這時候網頁開發者才意識到，必須得要弄一套行動版的網頁，不然如果直接用手機瀏覽目前網頁，排版上會變得非常奇怪，不易閱讀，進而影響使用者體驗，減少瀏覽意願，這是一件非常嚴重的事情，所以在那個年代，很常看到網址內有「m」的字樣，例如「m.adersaytech.com」，這個 m 就代表 mobile，專門給手機裝置使用，也常看到有「t」的字樣，例如「t.adersaytech.com」，t 就代表 Tablet，專門給平板裝置所使用的網址。

上述這種情況，就是要使用三個不同的 html 代碼，當有使用者連線到網站伺服器時，伺服器會先行做判斷，然後再把相對應的 html 內容回傳，工程師也需要維護三組不同的代碼，耗時耗工又耗人力，所以被淘汰只是時間上問題，因為太沒有效率了！

回應式網頁設計(RWD, Responsive Web Design)的出現，完美的解決這些問題，可以透過「同一組」HTML 網頁代碼，針對不同螢幕大小進行判斷，回傳相對應的內容，讓網頁內容完美符合各種螢幕大小，不會有排版上的問題，任何裝置都可以很容易的瀏覽與閱讀，所以網址永遠都只有一個，例如本站「adersaytech.com」，在不同裝置間都是使用這個網址，但內容排版會自行變化成符合該裝置螢幕大小的樣式。