很多人聽過自適應網頁設計，也知道它讓網站在手機上看得下去，但真的要判斷廠商做得對不對、或是自己要調整版面時，就會卡在不知道背後是怎麼運作的。RWD 不是一個外掛，也不是把電腦版縮小，它是由幾項基礎技術組合出來的做法。這篇把流體網格、彈性圖片與斷點三件事拆開講清楚，再比較自適應和另外做一個手機版網站在製作與長期維護上的差別。
撐起自適應版面的三個技術支柱
RWD 這個做法建立在三件事上：以相對比例配置的流體網格、會跟著容器縮放的彈性圖片與媒體，以及用 CSS 媒體查詢在特定條件下切換樣式。三者缺一，版面就會在某些尺寸下失控。只設了媒體查詢卻沿用固定寬度的排版，會在斷點之間出現橫向捲軸；網格做對了但圖片寫死尺寸，圖就會撐破欄位。
這裡要先釐清一個常見誤解：同一份 HTML 內容，靠 CSS 在不同寬度下呈現不同排列，這是自適應的核心。網頁的內容結構只有一份，變的只是呈現方式。理解這一點，後面很多取捨才會說得通，例如為什麼手機版不能隨便把某些區塊直接刪掉，因為那份內容其實還在，只是被隱藏，該下載的資源多半還是下載了。
流體網格為什麼要用相對單位而不是固定像素
傳統版面把欄寬寫成固定的像素值，換一個螢幕就不合。流體網格改成用百分比或分數比例來描述欄位，欄位寬度是相對於外層容器計算的，容器變寬變窄，內部欄位就跟著等比例調整。現代的版面排版工具也提供了更直接的寫法，可以讓欄位在最小與最大寬度之間自動伸縮，甚至在空間不足時自動換行。
字級與間距同樣建議用相對單位。使用者若在系統裡把字體調大，以相對單位設定的版面會整體放大而維持比例，寫死像素的則不會跟著變，對視力不佳的使用者不友善。實務上會保留少數需要固定的部分，例如邊框粗細或圖示尺寸，其餘盡量交給相對單位處理。
彈性圖片與媒體要處理的兩個問題
第一個問題是不撐破版面，這個容易解決，讓圖片的最大寬度不超過容器、高度自動計算即可。第二個問題比較麻煩：同一張為大螢幕準備的高解析圖，在手機上會浪費大量頻寬。單靠 CSS 縮小只是視覺上變小，檔案還是整份下載。
正確做法是在 HTML 端就提供多種尺寸的圖檔，由瀏覽器依螢幕寬度與像素密度自行挑選最合適的一份。若是版面裁切差異很大的情況，例如電腦版用橫幅、手機版需要直式構圖，則要提供不同構圖的來源，而不是讓同一張橫圖在手機上被壓成一條。另外要記得替圖片預留尺寸資訊，否則載入過程中版面會跳動，使用者剛要按的按鈕會突然位移。
斷點該看版面何時撐不住，不是看裝置型號
斷點是媒體查詢生效的界線。最常見的錯誤是照著某幾款熱門機型的解析度來設，機型會換、視窗會被使用者拉成任意寬度，照裝置設的斷點很快就失效。比較耐用的思路是從內容出發：把瀏覽器視窗慢慢拉窄，看版面在哪個寬度開始出問題，就在那裡設斷點。
- 由窄到寬設計：先把最窄的單欄版面做好，再逐步加寬時增加欄數，比反過來刪減容易維護。
- 看崩壞點：文字一行剩下幾個字、選單擠在一起、表格出現橫向捲軸，這些位置才是該設斷點的地方。
- 數量要克制：斷點越多，每次改版要驗證的組合就越多，能用彈性排版解決的就不要多開一個斷點。
- 區塊也能有自己的規則：卡片、側欄這類元件可以依自身容器寬度調整，不必全部綁在整頁的斷點上。
- 橫向也要看：手機橫放與小尺寸平板的寬度常落在斷點邊緣，這幾個區間要實際測過。
自適應與另做一個手機版網站，成本差在哪
另做一個手機版網站，意思是同一套內容維護兩份頁面，依裝置判斷把使用者導到不同網址。這種做法在早期有其時空背景，現在的主要問題是長期成本。內容改一次要改兩邊，容易出現兩版不同步；網址分成兩套，還得處理兩邊的對應關係與轉址規則，設定錯了會影響搜尋引擎對頁面的判讀。
自適應的成本則集中在前期。設計階段要同時想好寬窄兩種以上的排列方式，切版工時比只做單一版本高，測試也要橫跨多個寬度。但上線之後只有一份內容、一組網址，改一次全裝置同步生效，長期維護明顯輕鬆。
常見問題
自適應網頁設計和響應式網頁設計是同一件事嗎？
在台灣的日常溝通裡，這兩個詞多半指同一件事，也就是 RWD，同一份內容靠彈性版面與媒體查詢適應不同螢幕。嚴格區分的話，另有一種做法是伺服器依裝置回傳不同版本的頁面，性質比較接近前面說的另做手機版。詢價時建議直接問對方是不是同一組網址、同一份內容，答案會比名詞本身清楚。
已經上線的固定寬度網站，可以直接改成自適應嗎？
技術上可以，但改動幅度往往比預期大。固定寬度的版面通常大量使用寫死的像素值與絕對定位，要改成流體網格等於重寫樣式，有時連 HTML 結構都要調整才排得出手機版。如果原網站的結構還算乾淨，重寫樣式是可行的；若已經累積多年的疊加修改，重做的成本反而可能低於硬改。
斷點設幾個才夠？
沒有固定數字，取決於版面複雜度。內容單純的形象網站，常見的是在手機、平板、桌機之間分出兩到三個界線就足夠；有複雜表格、儀表板或多欄側欄的網站可能需要更多。判斷標準是拉動視窗時版面會不會出問題，而不是湊到某個數量。多設一個斷點就多一組要維護的樣式，這是實實在在的成本。
手機版可以把某些區塊隱藏起來嗎？
可以，但要分清楚是視覺上隱藏還是真的不輸出。用樣式隱藏的內容仍然存在於頁面中，相關資源可能照樣載入，只是看不到，對速度沒有幫助。而且把手機使用者需要的資訊藏起來，等於認定他們不需要，這通常不成立。比較好的處理是改變呈現方式，例如折疊成可展開的區塊，而不是整段拿掉。
怎麼驗收廠商交付的自適應成果？
除了在自己的手機上看過，建議做三件事：把電腦瀏覽器視窗從寬拖到窄，全程觀察有無破版；把系統字體放大後重看一次，確認版面會跟著放大而不是被切掉；以及檢查圖片是否針對不同寬度提供了適當尺寸，而不是所有裝置都下載同一張大圖。這三項都通過，基本體質就沒問題。
本文由京采數位科技整理。我們自 2005 年起提供官網設計、系統開發與 Google SEO 服務，實際案例可見成果與案例。
想直接討論你自己的網站狀況，或需要一份初步的搜尋機會評估？
加入京采 LINE 好友相關主題
下一步
如果你正在評估「自適應網頁設計」相關的規劃，可以參考我們的網頁設計服務，或直接與我們聯繫，我們會依你的產業與現況給出務實的建議。