RWD+SEO！5分鐘搞懂響應式設計的關鍵技巧

1. 什麼是 RWD（響應式網頁設計）？

RWD 就是讓網站的文字、圖片「變形、伸縮」，以適應不同裝置。

• 桌機：完整版面，大部分部落格或內容型網站會以桌機為基礎延伸平板、手機尺寸
• 平板：內容縮放，調整欄位
• 手機 → 內容自適應，方便閱讀，不需要放大縮小

你不需要學會寫程式，但你必須知道一件事。RWD（響應式設計）可以讓網站自己調整版面，適應不同大小的螢幕。
這樣一來，使用者用手機、平板或電腦時，都能輕鬆閱讀，不會覺得卡卡的。
如果你想讓更多人留下來看內容，懂RWD是基本功。

為什麼RWD很重要？

首先，影響Google排名
因為Google現在會優先索引網站的手機版，所以如果你的網站無法適應手機螢幕，排名就可能下降。

接著，影響使用者體驗
如果手機版網站的字體太小，或是按鈕之間距離太近，使用者在操作時會感到困難。結果，他們很可能很快就離開你的網站，導致跳出率上升。

最後，網站管理也更簡單
過去，網站常常需要分成桌機版和手機版。但這種做法會造成內容重複，增加管理負擔。
現在有了RWD（響應式設計），只需要建立一個網站，就能同時適應不同大小的裝置，讓內容維護更輕鬆，使用體驗也更一致。

Google 強烈推薦 RWD，因為它可以確保網站 在所有裝置上都能提供良好體驗，而且不會因為「內容重複」被 Google 降低 SEO 分數。

• Responsive design

2. RWD 的核心技術

為了讓網站在各種裝置上正常顯示，需要掌握以下三個重點。

流動網格（Fluid Grid）

傳統網站使用固定寬度（如 1200px），在手機上容易排版錯亂。
RWD 透過百分比設定寬度，讓版面隨螢幕大小自動縮放。

範例：

.container {
  width: 90%; /* 根據螢幕大小自適應 */
  max-width: 1200px; /* 限制最大寬度 */
  margin: 0 auto;
}

重點：使用百分比 %，而非固定像素 px，讓網站能自適應螢幕變化。

可調整圖片（Flexible Images）

固定圖片寬度（如 500px）會在小螢幕上爆框。
設定 max-width: 100% 可以讓圖片跟著螢幕縮放，保持版面整齊。

範例：

img {
  max-width: 100%;
  height: auto;
}

重點：圖片設為 max-width: 100%，避免超出螢幕。

媒體查詢（Media Queries）

媒體查詢能偵測螢幕大小，並根據尺寸變化調整樣式。
例如，當螢幕小於768px時，可以自動改變版面或隱藏選單。

範例：

@media (max-width: 768px) {
  .container {
    width: 100%;
  }
  .menu {
    display: none; /* 小螢幕隱藏選單 */
  }
}

重點：使用 @media (max-width: 768px)，針對不同螢幕客製化樣式。

3. 如果我用WordPress架站，該怎麼讓網站符合RWD？

即使不具備程式開發技能，也可以透過以下方法，使WordPress或其他CMS網站符合響應式設計（RWD）要求。

1. 選擇支援RWD的主題

許多舊版WordPress主題不支援響應式設計。因此，選擇內建支援RWD的主題至關重要。
推薦主題包括：Astra、GeneratePress、OceanWP、Neve。這些主題具備良好速度表現，並完整支援RWD標準。

2. 測試主題的RWD相容程度

操作步驟如下：

• 在桌面端開啟網站
• 按下 F12 開啟開發者工具
• 啟用「裝置模擬器」（Ctrl + Shift + M）
• 選擇如iPhone、iPad等裝置，觀察網站版面是否自動調整。

若版面能根據裝置變化自動縮放，即表示主題支援RWD。

2. 使用支援RWD的頁面編輯器

若你使用的是 Elementor、Divi 或 Beaver Builder 等可視化頁面編輯器，請特別留意以下設定，以確保網站支援響應式設計：

• 區塊寬度應使用百分比（%）表示，避免使用固定像素（px），以便自動調整版面。
• 行動裝置設定：這些工具通常內建行動版預覽與調整功能，建議切換至手機模式進行檢查與微調。

Elementor 操作說明：

1. 進入 Elementor 編輯介面
2. 點選上方「響應式模式」圖示（桌機、平板、手機）
3. 根據不同裝置調整字體大小、間距等，確保手機版顯示正常

3. 使用外掛提升RWD相容性

若希望進一步優化網站的響應式效果，可考慮安裝以下外掛：

• WPtouch Mobile Plugin：將舊版網站轉換為支援RWD的版本。
• AMP for WP：加速行動版網頁載入，特別適合部落格使用。
• Smush：自動壓縮圖片，減少手機版載入時間。
• Autoptimize：最佳化CSS與JavaScript，提升網站整體效能與RWD表現。

Lazy編自己有在用的是最後兩個！尤其最後一個很推薦，不用改code也可以自動優化冗餘的CSS和JS

如果想了解更多適合文組的網站速度優化法，可以參考：適合文組的技術SEO-親身分享4種網站速度優化法

如何測試網站是否符合 RWD？

• Google行動裝置相容性測試(現已淘汰)

• 在 Chrome DevTools 開啟手機模式，看看有沒有跑版！
  • (也可以在上方輸入想模擬的視窗尺寸，或是手動拖拉)

Lazy大禮包：RWD 測試清單

即使不會寫程式，也可以透過以下項目，檢查網站是否符合RWD標準：

• 確認主題是否支援RWD（路徑：WordPress → 設定 → 自訂 → 外觀 → 行動裝置）。
• 所有區塊寬度使用百分比（%），避免固定像素（px）。
• 圖片寬度設定為 max-width: 100%，防止超出畫面。
• 使用Google行動裝置相容性測試工具，確認網站在手機上的表現。

你現在已經學會 RWD 了！馬上試試看吧。