RWD 響應式網頁設計完整指南 2026｜手機平板電腦三裝置適配 5 個關鍵 + 測試方法

RWD（Responsive Web Design，響應式網頁設計）已經是 2026 年網站的基本門檻，不再是錦上添花的選項。台灣行動裝置佔網路流量超過 60%，網站若沒做好 RWD 適配，等於把一半以上的訪客直接擋在門外，連 Google 排名都會被連動拖垮。

這篇指南把 RWD 從觀念講到實作：是什麼、為什麼非做不可、5 個技術關鍵（流式版面、彈性圖片、媒體查詢、行動優先、Core Web Vitals）、手機／平板／電腦三裝置的設計要點、5 個測試方法、3 個常見錯誤。最後也會說明，秒站範本如何把 RWD 與 Core Web Vitals 內建處理，讓使用者不用碰 CSS 就直接拿到三裝置適配的網站。

適合 3 種讀者：第一種是準備自己架網站、想搞懂 RWD 基本面的個人或小團隊；第二種是已經有網站但手機開起來版面跑掉、想知道哪裡出問題的網站管理者；第三種是已經做好 RWD 但行動端載入慢、Google PageSpeed 分數低、想優化 Core Web Vitals 的進階使用者。整篇可以當成 RWD 完整地圖直接讀完，也可以挑章節跳著看。

RWD 是什麼？2026 為什麼網站不做 RWD 等於放棄 60% 流量

RWD 全名 Responsive Web Design，中文叫「響應式網頁設計」，意思是同一份網頁原始碼，可以根據訪客裝置螢幕的寬度，自動調整版面、字級、圖片、選單擺放位置，讓網站在手機、平板、電腦上都能正常閱讀與操作。它是 Ethan Marcotte 在 2010 年 A List Apart 文章裡提出的觀念，到 2026 年已經是業界共識的標準做法。

RWD 之前，業界另一條路線是「行動版獨立網站」（m.example.com），桌機版跟手機版兩套程式碼分開維護。這個做法的問題在於：兩套版本要重複更新、SEO 訊號分散、跨裝置連結複雜。RWD 只用一份程式碼處理所有裝置，維護成本與 SEO 訊號都集中，2026 年幾乎沒有新網站再走獨立行動版路線。

行動裝置流量過半，沒做 RWD 就是放棄訪客

依據國際公開的網路流量統計，全球行動裝置佔網頁瀏覽流量的比重在 2024 年起就穩定維持在 55% 至 60% 之間，台灣市場行動流量比重又比全球平均更高。換句話說，網站若只在桌機看得順、手機開起來文字過小、按鈕擠在一起、要左右滑才能看到完整內容，等於主動把超過一半的訪客推開。

實務上影響更直接的還有跳出率。手機訪客若 3 秒內看不到主要內容、找不到操作按鈕，會立刻關掉分頁。GA4 行為事件裡，手機跳出率比桌機高出 1.5 至 2 倍是常見現象，沒做好 RWD 的網站這個差距會更誇張。

Google 行動優先索引：手機體驗直接決定排名

Google 從 2019 年起把所有新網站預設改用「行動優先索引」（Mobile-First Indexing），2023 年完成全站台轉移。意思是 Google 派來爬網站的機器人，看到的是手機版內容，桌機版反而是次要參考。網站若手機版排版跑掉、內容缺漏、載入過慢，Google 給的排名分數會被直接打折。

更具體的指標叫 Core Web Vitals，Google 從 2021 年起把它列為排名訊號之一，2024 年用 INP 取代了原本的 FID。這 3 個指標（LCP、INP、CLS）都跟使用者體驗綁在一起，行動裝置的數值通常比桌機嚴苛，沒做 RWD 與效能優化的網站，這 3 個指標會直接被踢出綠燈區。SEO 的底層基礎可以從SEO 架站完整指南看到 RWD 在整個排名訊號裡的位置。

RWD 5 個技術關鍵：流式版面、彈性圖片、媒體查詢、行動優先、Core Web Vitals

RWD 不是單一技術，而是 5 個相互配合的設計原則。Ethan Marcotte 最早的 RWD 三本柱是流式版面、彈性圖片、媒體查詢；後來業界把行動優先設計與 Core Web Vitals 加進來，成為 2026 年完整的 RWD 技術清單。少了任何一個，網站在某個裝置上就會出狀況。

關鍵 1：流式版面（Fluid Grid）

流式版面的核心精神是「用百分比，不用固定像素」。傳統網頁設計常用 width: 960px 這種固定寬度，在 360 像素寬的手機螢幕上會被直接截掉。流式版面改用 width: 100% 或 max-width: 1200px 配 width: 90%，讓版面寬度依瀏覽器視窗自動縮放。

2020 年後 CSS Grid 與 Flexbox 普及，現代 RWD 大多用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 這類語法，做出能自動換列、自動縮放的版面。手機看是單欄、平板自動變兩欄、電腦變三欄，整個過程不需要額外寫媒體查詢。

關鍵 2：彈性圖片（Flexible Images）

圖片是 RWD 最容易出包的環節。沒處理好的圖片，在手機上會超出螢幕寬度，硬把版面撐爆，或是擠成像郵票一樣的小圖。基本解法是 CSS 加上 img { max-width: 100%; height: auto }，讓圖片寬度跟著容器縮放，比例自動維持。

進階做法用 srcset 與 picture 元素，依裝置螢幕寬度提供不同尺寸的圖檔。手機載入小圖（節省流量），電腦載入大圖（畫質清晰）。WebP、AVIF 等新格式可以再壓縮 30% 至 50% 檔案大小，對行動網路速度幫助很大。圖片優化做好，Core Web Vitals 的 LCP 分數會立刻拉上來。

關鍵 3：媒體查詢（Media Queries）

媒體查詢是 CSS 用來偵測裝置螢幕寬度、依寬度套用不同樣式的語法。寫法像 @media (max-width: 768px) { … }，意思是「螢幕寬度小於等於 768 像素時，套用這段樣式」。它讓設計者可以針對手機、平板、電腦分別調整版面。

業界常用的斷點有 4 個層級：手機（最大 480 像素）、大螢幕手機與小平板（481 至 768 像素）、平板與小筆電（769 至 1024 像素）、桌機（1025 像素以上）。實務上不需要硬背這些數字，重點是依「設計上版面開始崩壞」的位置設斷點，而不是依特定裝置型號。

關鍵 4：行動優先設計（Mobile-First）

行動優先是一種設計順序：先設計手機版，再放大到平板與電腦版，而不是反過來。原因是手機螢幕小，逼設計者必須先想清楚「核心內容是什麼、最重要的操作是哪一個」。先做手機版，桌機版的版面通常會更精簡有重點。

程式碼層面，行動優先的 CSS 寫法是「預設樣式給手機用，用 min-width 媒體查詢加上桌機樣式」，例如 @media (min-width: 768px) { … }。這樣手機載入時不會浪費頻寬解析桌機版的 CSS，效能更好。Google 的行動優先索引也偏好這種架構。

關鍵 5：Core Web Vitals（LCP／INP／CLS）

Core Web Vitals 是 Google 量化使用者體驗的 3 個指標。LCP（Largest Contentful Paint，最大內容繪製）測量頁面主要內容多久顯示完成，目標 2.5 秒內。INP（Interaction to Next Paint，互動到下一次繪製）測量點擊或輸入後，畫面多久回應，目標 200 毫秒內。CLS（Cumulative Layout Shift，累積版面位移）測量頁面載入過程中版面跳動的程度，目標 0.1 以下。

這 3 個指標在行動裝置的標準比桌機更嚴格，因為手機網路與處理器較弱，使用者對延遲容忍度也低。RWD 做得好但 Core Web Vitals 沒過，Google 還是會打折排名。實務上 LCP 透過圖片優化與 CDN 改善，INP 靠減少 JavaScript 阻塞，CLS 靠先設定圖片與廣告位的固定尺寸。秒站把這 3 個指標的優化做進範本層，使用者不必自己處理這層細節。

三裝置適配實作要點：手機／平板／電腦

RWD 的目標是同一份網頁在 3 種主流裝置上都能正常使用，但 3 種裝置的使用情境差很多。手機是單手快速操作、平板是雙手橫看影音與閱讀、電腦是長時間多視窗作業。版面設計若只是把桌機版「縮小」放手機，會踩到很多細節地雷。

手機（≤ 480 像素）：單欄、大字、大按鈕

手機版面預設單欄垂直滾動，所有內容由上往下排。字級最小 16 像素以上，避免使用者要放大才看得清楚。按鈕高度 44 像素以上，這是 Apple 與 Google 設計指南的最低觸控目標尺寸，按下去才不會點錯。

導覽列建議收成漢堡選單（三條線圖示），點開才展開。表單欄位一行只放一欄，避免使用者要左右捲。圖片載入用 lazy loading，沒進到視窗內的圖暫時不下載，省流量也加快首屏速度。

平板（768 至 1024 像素）：雙欄、適度留白、考慮直橫向

平板版面通常是手機版的擴充版，可以從單欄變雙欄，例如商品列表從一行 1 個變一行 2 個。字級可以稍微放大到 17 至 18 像素，行高拉到 1.6 倍，閱讀更舒適。導覽列依空間決定要不要展開，現在很多平板用直拿模式，建議仍保留漢堡選單。

平板的橫向模式寬度跟小筆電接近（1024 像素），有些設計會直接套桌機版規則，但要小心觸控操作，按鈕仍維持 44 像素以上，hover 效果不可當主要互動方式（平板沒有滑鼠 hover）。

電腦（≥ 1025 像素）：多欄、留白、hover 效果

桌機螢幕最寬，可以做 3 欄或 4 欄版面，但內容區建議設 max-width: 1200px 至 1400px，避免在超寬螢幕上文字一行拉到 30 個字以上，閱讀體驗反而下降。兩側留白比塞滿內容好。

導覽列可以完整展開，hover 效果（滑鼠移過去顯示子選單、按鈕變色）這時可以盡情用。但記住一件事：桌機有的功能，手機要有 fallback；hover 顯示的子選單，手機要改用點擊展開。

三裝置設計要點對照

項目	手機（≤ 480px）	平板（768 至 1024px）	電腦（≥ 1025px）
版面欄數	單欄	1 至 2 欄	2 至 4 欄
字級下限	16 像素	17 至 18 像素	16 像素（內容區）
按鈕高度	44 像素以上	44 像素以上	36 像素以上
導覽列	漢堡選單	漢堡或縮減版	完整展開
內容寬度	100%	90% 至 100%	max-width 1200 至 1400px
互動方式	觸控、滑動	觸控為主	滑鼠、鍵盤、hover
圖片策略	小圖、lazy load	中圖、按需載入	大圖、清晰度優先
表單欄位	每行 1 欄	每行 1 至 2 欄	每行 2 至 3 欄

這份對照表是設計起點，不是絕對守則。實際專案要看內容類型調整：商品列表可能桌機放 4 欄、平板 3 欄、手機 2 欄；長文部落格則建議桌機就維持單欄、把內容寬度限制在 700 至 800 像素，閱讀體驗最好。網站要呈現的內容類型不同，RWD 設計策略也會不同，這部分可以從網站設計完整指南找到不同產業類型的 RWD 設計範例。

RWD 5 個測試方法：從瀏覽器到實機

RWD 寫完不代表做完，必須在多種裝置與瀏覽器上實際驗證。下面 5 個測試方法從免費的線上工具到付費的雲端實機平台，從基本檢查到全面壓力測試都有，可以依需求組合使用。

方法 1：Google Mobile-Friendly Test

Google 官方提供的免費線上工具，網址 search.google.com/test/mobile-friendly。輸入網址後，工具會模擬 Googlebot 用手機螢幕載入頁面，回報是否通過行動友善測試，並列出發現的問題（文字過小、可點擊元素過密、視窗未設定）。Google 從 2024 年底已將獨立工具整合進 Search Console，建議直接在 Search Console 的「行動裝置可用性」報表查詢同樣的訊息。

這是最快的初篩工具，網站上線前必跑。通過不代表沒問題，但沒通過一定要修，否則 Google 排名會直接受影響。

方法 2：Chrome DevTools 裝置模擬

Chrome 瀏覽器內建的開發者工具，按 F12 開啟後切到「Toggle device toolbar」（手機平板圖示，快捷鍵 Ctrl+Shift+M）。可以選 iPhone、iPad、Galaxy、Pixel 等預設裝置尺寸，也可以拖拉視窗自由設定寬度。

進階用法是切換網路速度（Slow 3G、Fast 3G、4G），模擬行動網路環境下的載入速度，看 Core Web Vitals 在弱網環境的表現。也可以模擬不同的 user-agent，測試後端有沒有針對特定瀏覽器做特殊處理。免費、快速、開發過程一直在用。

方法 3：BrowserStack（雲端實機）

付費的雲端實機測試平台，可以在瀏覽器裡直接操作 iPhone、Android、iPad、Mac、Windows 等真實裝置與瀏覽器組合，不必自己準備一堆手機平板。月費起跳約 USD 39 / 月，可選方案。

適合上線前最後一輪驗收，特別是要確認 Safari iOS、舊版 Android 瀏覽器這類自己沒實機的環境。免費替代品有 LambdaTest（也付費，但有試用額度）、Sauce Labs。

方法 4：實機測試

瀏覽器模擬再準也比不上拿真機操作。準備至少 3 台裝置：一台 iPhone、一台 Android 手機（不同廠牌螢幕比例差異大）、一台 iPad 或 Android 平板。連上網實際操作完整使用者流程：找資訊、填表單、結帳、註冊。

實機測試會抓到的問題，瀏覽器模擬抓不到：iOS Safari 的瀏海擋住按鈕、Android 軟鍵盤跳出來把表單頂走、捲動到底發生 over-scroll 反白、橫向旋轉版面卡住。實機測試的覆蓋面雖然有限，但抓出的都是真使用者會遇到的痛點。

方法 5：PageSpeed Insights（Core Web Vitals 量測）

Google 官方的效能量測工具，網址 pagespeed.web.dev。輸入網址後同時跑桌機與行動兩份報告，列出 LCP、INP、CLS 的實際數值與分數，並指出具體可改善項目（圖片過大、阻塞 JavaScript、未壓縮 CSS）。

這是 RWD 與效能的最終驗收工具。重點看「行動裝置」分數：能進綠燈（90 分以上）通常代表 RWD 與效能優化都做到位。注意分數會隨網路與時段波動，建議連續測 3 次取中位數，比較穩定。整個 SEO 排名訊號（含 Core Web Vitals）的完整脈絡，可以從秒站 SEO 完整解析看到秒站怎麼把這層整合進範本。

RWD 3 個常見錯誤：字太小、按鈕太擠、圖片太大

下面這 3 個錯誤是 RWD 上線後最常被使用者抱怨、也是 Google Mobile-Friendly Test 最常標出來的問題。設計階段就避開，比上線後再修划算很多。

錯誤 1：手機字級小於 14 像素

很多設計師習慣桌機 12 至 14 像素的小字，覺得精緻。手機螢幕物理寸只有 5 至 6 吋，14 像素的字看起來等於電腦上 8 至 9 像素，使用者要瞇眼或放大才看得清楚。Google Mobile-Friendly Test 會把字級小於 12 像素直接標為錯誤。

建議手機內文最低 16 像素，重要資訊（價格、促銷、按鈕文字）18 至 20 像素。配色對比也要拉夠（WCAG AA 標準至少 4.5:1），灰底淡字在強光下看不清楚。

錯誤 2：按鈕太擠或太小

桌機用滑鼠點擊精準度高，按鈕做小一點、靠近一點沒事。手機用手指點，平均指尖接觸面積約 10 毫米（相當於 44 像素），Apple HIG 與 Material Design 都建議觸控目標最低 44 像素見方，按鈕之間至少留 8 像素間距。

常見的踩雷情境：表單裡的 checkbox 或 radio 預設只有 16 像素見方，手機點下去常點到旁邊；連續排列的「上一頁／下一頁」分頁按鈕沒留間距，使用者按錯。解法是給觸控目標加 padding，把實際可點擊範圍撐大到 44 像素，視覺上看起來還是小按鈕。

錯誤 3：圖片沒壓縮、沒做響應式尺寸

桌機版設計用 2000 像素寬的高清圖很合理，但同一張圖直接給手機載入，動輒 1 至 3 MB 的圖檔在 4G 環境會卡好幾秒。沒做 WebP / AVIF 壓縮、沒用 srcset 提供小尺寸版本、沒加 lazy loading，是行動端 LCP 分數低落的主因。

解法分 3 層：先把圖片壓成 WebP 或 AVIF（檔案大小可降 30% 至 50%）、再用 srcset 提供 400px / 800px / 1600px 三種尺寸給瀏覽器自選、最後加 loading=”lazy” 屬性讓沒進視窗的圖延後下載。同時也別忘了「隱藏內容」的問題：有些設計用 display: none 在手機隱藏桌機版內容，但檔案還是會被下載，等於白載。建議直接用條件渲染或服務端不輸出，從根源減少傳輸量。

不想自己處理 RWD？秒站範本內建響應式

RWD 講起來只有 5 個關鍵，做好卻要懂 CSS、Flexbox、Grid、媒體查詢、圖片優化、效能調校，還要持續測試三裝置適配。對沒有工程背景的中小企業主、個人品牌、講師顧問來說，自己處理這層幾乎不可能，找外包又動輒 NT$10 萬起跳的設計費。

秒站 x 即站力是台灣團隊用 WordPress 打造的 SaaS 架站服務，專業顧問企劃過的網站範本出廠就是 RWD：流式版面、彈性圖片、媒體查詢、行動優先、Core Web Vitals 5 個技術關鍵全部內建。使用者選範本、填內容、改色彩，網站自動在手機、平板、電腦三裝置上表現一致。

秒站範本天生 RWD 的 3 個層次

• 版面層：所有區塊用流式版面與媒體查詢設計，內容寬度、字級、按鈕、表單欄位依裝置自動調整，使用者不需要自己寫 CSS。
• 圖片層：後台上傳圖片自動產生 WebP 格式與多尺寸版本，前端用 srcset 對應裝置寬度載入，並預設啟用 lazy loading。
• 效能層：Core Web Vitals 的 LCP / INP / CLS 在範本層做過優化，含 CDN 加速、字型優化、JS 延後載入。客戶從註冊到上線，不用自己處理伺服器或快取設定。

方案費用透明：標準方案 NT$24,000（首年）／NT$12,000 起（次年）含 RWD 範本與基礎 SEO；專業方案 NT$36,000 加上線上課程、金流、訂單管理；輕電商方案 NT$48,000 多了實體物流串接。3 個方案全部都包含 RWD 與 Core Web Vitals 優化，沒有額外加購。

什麼情況該選秒站、什麼情況該找客製設計

秒站適合：要求快速上線（1 週內）、預算 NT$5 萬以下、品牌調性是中小企業／個人品牌／SaaS／講師顧問、版面需求落在範本可調整範圍內。如果你要的是高度客製互動（複雜動畫、3D 視覺、特殊互動腳本）、或品牌已經有完整視覺識別必須 100% 還原，那就需要找客製化設計團隊。決策框架的細節可以從2026 架站平台完整指南看不同類型網站對應的解法。

對絕大多數中小企業主與個人品牌，先用秒站把網站上線、把 RWD 與 SEO 基礎處理掉，跑半年看流量與成交數據，再決定要不要花更高預算做客製，是比較理性的順序。案例庫裡可以看到實際使用者用秒站做出來的 RWD 網站，含手機、平板、電腦三裝置實際呈現。

內文精華總結

沒做 RWD 等於放棄 60% 行動流量

• 台灣行動裝置佔網站流量 60-70%
• Google 排名 mobile-first index、RWD 是入場券

三裝置適配標準

• 手機（< 768px）：單欄、字級 ≥ 16px、按鈕 ≥ 48px
• 平板（768-1024px）：兩欄、桌面（> 1024px）：完整版面

完整測試方法

• Chrome DevTools 模擬不同裝置、實機測試 iOS / Android
• Google Mobile-Friendly Test 工具

下一步：把 RWD 做進你的網站

讀到這裡，你已經知道 RWD 的 5 個技術關鍵、三裝置的設計要點、5 個測試方法、3 個常見錯誤。下一步要不要動手實作，看你目前的狀況：

• 還沒有網站：從 RWD 範本開始最快，可以參考公司網站完整指南看 8 個必備頁面、再決定方案。
• 已有網站但 RWD 沒做好：先跑 PageSpeed Insights 看行動分數，列出 3 個最高優先的問題（多半是字級、按鈕、圖片），逐一修。
• 準備換新平台：秒站方案頁提供 3 個價位帶（標準／專業／輕電商），全部內建 RWD 與 Core Web Vitals 優化。
• 要做整體 SEO 規劃：SEO 架站完整指南把 RWD 放在排名訊號全圖裡，可以看到接下來要補哪些工。

RWD 不是炫技，是 2026 年網站的基本門檻。做不做不是選擇題，是必修課。早一天做好，早一天能接住手機、平板、電腦三裝置上的訪客。

重點整理

RWD 跟自適應網頁設計（AWD）差在哪？哪個比較好？

RWD（Responsive Web Design）用一套 CSS 媒體查詢，依瀏覽器寬度連續縮放版面，所有裝置都吃同一份程式碼。AWD（Adaptive Web Design）則準備幾套固定版面，依偵測到的裝置類型套用對應版本。RWD 維護成本低、SEO 訊號集中、適合大多數網站；AWD 在特殊情境（極端客製化的桌機與手機體驗差很大）才會用，但 2026 年新案幾乎都選 RWD。除非有強烈的客製需求，沒理由選 AWD。

我的網站已經很久了，沒做 RWD，現在補做要花多少？

依網站規模差很多。一頁式形象站找外包重做 RWD 大約 NT$1 萬至 3 萬；中型企業網站（10 至 30 頁）約 NT$5 萬至 15 萬；複雜功能站（含會員、購物車、表單系統）NT$15 萬以上。如果是 WordPress 站，換一個現代主題（如 Astra、GeneratePress）比較便宜，但要重新調整版面內容。要評估值不值得補做，先看 GA4 行動裝置流量比例：超過 30% 就該做，超過 50% 是急迫。當然也可以考慮直接換 SaaS 架站平台，省去自己處理 RWD 的麻煩。

Google 的「行動優先索引」是什麼？對 SEO 有多大影響？

Google 從 2019 年起預設用手機版 Googlebot 抓取與索引網站內容，2023 年完成全站台轉移。意思是 Google 主要看的是你網站的手機版，桌機版反而是次要參考。如果手機版內容比桌機版少（藏了某些區塊）、結構化資料缺失、載入太慢，Google 看到的就是「這個網站手機體驗差」，排名會直接受影響。實務上行動優先索引最大的衝擊是：以前桌機版排第 3，手機版做不好的話現在可能掉到第 8 至 10 名。RWD 做好是最直接的補救。

Core Web Vitals 的 LCP、INP、CLS 是什麼？對 RWD 有什麼影響？

這 3 個是 Google 用來量化頁面體驗的指標。LCP（最大內容繪製）目標 2.5 秒內，主要靠圖片優化、CDN、字型優化來改善。INP（互動到下一次繪製）目標 200 毫秒內，主要靠減少 JavaScript 阻塞、避免長任務。CLS（累積版面位移）目標 0.1 以下，主要靠先設定圖片與廣告位的固定尺寸。3 個指標在行動裝置的標準比桌機嚴格，因為手機網路與處理器較弱。RWD 做得好但 Core Web Vitals 沒過，Google 還是會打折排名，2 件事必須一起做。

用 Bootstrap 或 Tailwind CSS 框架做 RWD 跟自己手刻有差嗎？

差別在於開發速度與檔案大小。Bootstrap、Tailwind 已經內建完整的 RWD 斷點與工具類別，可以快速組出響應式版面，適合開發時間緊或團隊技術水準不一致的專案。缺點是會引入多餘 CSS（即使只用一小部分），影響首次載入速度。手刻 RWD 程式碼較精簡、可控性高，但開發時間長、容易出 bug，也需要熟悉 CSS Grid 與 Flexbox。2026 年實務上的折衷做法是用 Tailwind 的 PurgeCSS 或 Tailwind 4 的 just-in-time 編譯，只把實際用到的類別打包進去，等於拿到框架的開發效率又不犧牲檔案大小。

RWD 必須兼顧到舊版瀏覽器嗎？例如 IE 11？

Microsoft 已於 2022 年 6 月停止支援 IE 11，2023 年 2 月起更主動把它從 Windows 系統移除。2026 年仍堅持支援 IE 的網站幾乎只剩特殊產業（部分政府系統、企業內網），一般網站可以放棄。CSS Grid、Flexbox、媒體查詢這些 RWD 核心技術在所有現代瀏覽器（Chrome、Edge、Safari、Firefox 過去 3 年內版本）都全面支援。建議用 caniuse.com 查詢具體 CSS 屬性的支援度，看你目標客群實際使用的瀏覽器版本決定要不要寫 fallback。

我用秒站架站，要自己處理 RWD 嗎？

不用。秒站所有網站範本出廠就是 RWD，5 個技術關鍵（流式版面、彈性圖片、媒體查詢、行動優先、Core Web Vitals）都內建在範本層。使用者選範本、填內容、改色彩，網站自動在手機、平板、電腦三裝置上表現一致，不需要自己寫 CSS 或設計斷點。圖片上傳會自動產生 WebP 格式與多尺寸版本，前端依裝置寬度載入對應大小。Core Web Vitals 的 LCP / INP / CLS 在範本層做過優化（含 CDN、字型優化、JS 延後載入）。3 個方案（標準 NT$24,000、專業 NT$36,000、輕電商 NT$48,000）全部都包含 RWD 與 Core Web Vitals 優化，沒有額外加購。

RWD 做好就一定通過 Google Mobile-Friendly Test 嗎？

不一定。RWD 解決版面問題，但 Mobile-Friendly Test 還會檢查 viewport meta 標籤是否設定正確、文字是否可讀（最小 12 像素以上）、可點擊元素是否有足夠間距、頁面是否有 plugin 內容（Flash 等）。常見的踩雷情境是 RWD 寫得很好但忘了加 viewport meta（瀏覽器無法正確縮放）、或字級在 CSS 設了 14 像素但裝置實際渲染後變更小。建議 RWD 完成後務必跑一次 Mobile-Friendly Test 跟 PageSpeed Insights 雙重驗證，兩個工具一起綠燈才算真正過關。