1. 什麼是 RWD（響應式網頁設計）？
簡單來說，RWD 就是讓網站「變形」，適應不同裝置
- 桌機 🖥 → 顯示完整版面
- 平板 📱 → 內容縮放，調整欄位
- 手機 📱 → 內容自適應，方便閱讀，不需要放大縮小
📌 你不需要會寫程式，但你要知道： RWD 可以讓網站 自動適應不同螢幕大小，讓使用者在手機上也能舒服地閱讀，而不會覺得「字太小、按鈕太難點」。
為什麼RWD很重要？
1️⃣ 影響 Google SEO 排名 → Google 會優先索引「行動裝置版」，如果你的網站不適應手機，排名就會下降。
2️⃣ 影響用戶體驗 → 如果手機版網站的字太小、按鈕太近，使用者就會離開你的網站。
3️⃣ 不用做兩個網站 → 以前有些網站會做 桌機版 + 手機版，但這樣會造成 內容重複、管理麻煩，RWD 讓你 一個網站就搞定所有裝置！
📌 Google 怎麼看 RWD？
Google 強烈推薦 RWD，因為它可以確保網站 在所有裝置上都能提供良好體驗，而且不會因為「內容重複」被 Google 降低 SEO 分數。
2. RWD 的核心技術
你不需要會寫程式，但你要知道 RWD 主要靠這 3 個機制
如果你覺得這些技術看起來太難，先記住： 👉 這些技術讓網站可以「變形」，適應不同裝置
你不需要會寫code，只要認得出每個技術的樣子和功能就好！
1️⃣ 流動網格（Fluid Grid）
以前的網站是 固定寬度（例如 width: 1200px;），在手機上會跑版。
👉 RWD讓網頁的寬度變成「百分比」，這樣它就能隨著螢幕縮放！
☑️ 範例
.container {
width: 90%; /* 根據螢幕大小自適應 */
max-width: 1200px; /* 限制最大寬度 */
margin: 0 auto;
}✅ 你只要記住：
- 讓網站的寬度變成百分比
%，而不是固定像素px，這樣它才會自適應。
2️⃣ 可調整圖片（Flexible Images）
圖片如果固定 width: 500px;，在小螢幕上就會爆框。
👉 解法：讓圖片的寬度 max-width: 100%，這樣它就不會超出螢幕！
☑️ 範例
img {
max-width: 100%;
height: auto;
}✅ 你只要記住：
- 圖片的寬度要設成
max-width: 100%;，這樣它才會根據螢幕大小縮放！
3️⃣ 媒體查詢（Media Queries）
是一種「偵測螢幕大小，然後改變樣式」的技術。
👉以下方範例而言，如果螢幕寬度小於 768px，就讓字體變大、按鈕變好點！
☑️ 範例
@media (max-width: 768px) {
.container {
width: 100%;
}
.menu {
display: none; /* 小螢幕隱藏選單 */
}
}✅ 你只要記住：
@media (max-width: 768px) {}這段 CSS 會查詢視窗大小，並針對各個大小的視窗，客製化樣式。
3. 如果我用WordPress架站，該怎麼讓網站符合RWD？
你不需要寫程式，但你可以透過這些方法來確保你的 WordPress 或其他CMS符合RWD！
1️⃣ 選擇 RWD 友善的主題
- WordPress 上有些舊的主題不支援RWD，所以選擇 內建支援 RWD 的主題 很重要！
- 推薦主題：Astra、GeneratePress、OceanWP、Neve（這些主題都很快，支援 RWD）
如何測試你的主題是否符合 RWD？
- 在電腦上打開你的網站
- 按
F12打開開發者工具 - 點擊「裝置模擬器」(
Ctrl + Shift + M)，選擇 iPhone、iPad，看看網站是否有變化！
2️⃣ 使用 RWD 友善的 Page Builder
如果你是用 Elementor、Divi、Beaver Builder 這類拖拉式的頁面編輯器，請注意：
- 所有區塊的寬度 記得設為
%，不要用固定px值！ - 行動版排版調整：很多 Page Builder 都有「行動版設定」，記得切換到「手機模式」檢查排版。
✅ 如何設定 Elementor 的行動版調整？
- 進入 Elementor 編輯頁面
- 點擊上方的「響應式模式」圖示（手機、平板、桌機）
- 根據不同裝置微調字體大小、間距，確保手機上顯示正常！
3️⃣ 使用外掛提升 RWD 相容性
可以試試這些 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 要點：
- 確認主題是否支援 RWD（WordPress 設定 → 自訂 → 外觀 → 行動裝置）
- 所有區塊的寬度使用
%，不要用px！ - 圖片寬度設
max-width: 100%;，確保不超框！ - 使用 Google 測試工具，確保行動相容性！
你現在已經學會 RWD 了！馬上試試看吧。
