昨天的無障礙設計反覆在問一件事:你的介面在各種「不利情境」下還撐不撐得住?看不到、不能用滑鼠、辨不出顏色——這些都是脫離「理想使用者」的假設。響應式設計問的是同一件事的另一半:當螢幕從 320 像素的舊手機,一路變到 3840 像素的外接大螢幕,你的版面還讀得通嗎?無障礙關心「誰在用、用什麼輔助」,響應式關心「在多大的畫面、什麼姿勢下用」,兩者其實是同一種謙卑:承認你無法控制使用者的處境,只能讓設計有彈性地去適應它。
📖 學
三根支柱:流動網格、彈性圖片、媒體查詢
響應式設計這個詞在 2010 年由 Ethan Marcotte 提出時,建立在三個技術支柱上,今天依然是骨架。第一是流動網格(fluid grid):版面寬度不用固定的像素,而用百分比或相對單位,讓欄位隨容器伸縮。第二是彈性圖片(flexible images):最基本的 img { max-width: 100%; height: auto; } 就能讓圖片不撐破容器,再進階則交給 srcset 與 <picture> 依螢幕解析度供應不同尺寸的檔案,省流量也保畫質。第三是媒體查詢(media queries):用 @media 這個 CSS at-rule,依視窗寬度、方向、甚至使用者偏好(深色模式、減少動效)套用不同樣式。這三者的共同精神是「別假設一個固定尺寸」——固定像素的版面在今天已經是反模式。
斷點要由內容決定,不是由裝置決定
初學者最常犯的錯,是把斷點(breakpoint)訂在「iPhone 是 375、iPad 是 768」這種裝置寬度上。這條路走不通,原因很簡單:裝置尺寸每年都在變,你追不完,而且明天就有一支寬度落在你兩個斷點縫隙裡的新機型。web.dev 的官方教材講得很直白——斷點應該依內容而定,不是依熱門裝置而定。正確的做法是:把瀏覽器視窗慢慢拉寬,盯著內容看,當某一行文字長到「讀起來很累」、或某個排列開始顯得空洞尷尬時,那個寬度才是你該下斷點的地方。一段文字最舒服的行長大約是 45 到 75 個字元,超過就該考慮分欄或限制寬度。斷點是為內容服務的,不是為了討好某支手機的規格表。
Mobile-First:漸進增強,而非優雅降級
Mobile-first 不只是「先畫手機版」的作業順序,而是一種 CSS 寫法的哲學。它的做法是:先為最小、最受限的螢幕寫好基礎樣式(不放進任何媒體查詢),然後只用 min-width 的媒體查詢往上加,螢幕愈大才愈疊加額外的樣式。
/* 基礎:手機,不需要媒體查詢 */
.layout { display: block; }
/* 螢幕變寬才增強 */
@media (min-width: 50em) {
.layout { display: grid; grid-template-columns: 2fr 1fr; }
}這叫漸進增強(progressive enhancement),和舊時代「先做桌面再想辦法縮小」的**優雅降級(graceful degradation)**方向相反。為什麼 mobile-first 更好?因為手機是限制最多的環境——螢幕最小、網路最慢、CPU 最弱。先在最嚴苛的條件下把核心內容跑通,你自然會被迫做取捨、砍掉冗餘;之後往大螢幕加東西,是在充裕的資源上做加法,遠比在桌面版的一堆假設裡做減法輕鬆。而且 min-width 疊加的寫法讓 CSS 的層疊邏輯乾淨:小螢幕永遠拿到最基本、最保險的那份樣式。
clamp() 與流動排版:少下幾個斷點
過去要讓字級隨螢幕變化,得下好幾個媒體查詢逐段調整,結果是字級「跳階」地變大。現代 CSS 用一個函式就解決了:clamp(最小值, 理想值, 最大值)。例如標題寫成 font-size: clamp(1.5rem, 4vw + 1rem, 3rem),字級會隨視窗寬度平滑地在 24px 到 48px 之間流動,永遠不小於最小值、不大於最大值。這叫流動排版(fluid typography),它把「離散的斷點」換成「連續的縮放」,少下很多媒體查詢。同樣的思路也適用於間距與寬度。搭配 CSS Grid 的 repeat(auto-fit, minmax(16rem, 1fr)),你甚至能做到「卡片自己決定一行放得下幾張」,完全不寫任何斷點——這就是**內在式版面(intrinsic layout)**的精神:讓元素依可用空間自我安排,而不是由你硬性規定每個尺寸該怎樣。
Container Queries:讓元件響應「容器」而非「視窗」
媒體查詢有個先天限制:它只看得到視窗的尺寸,看不到元件實際被放在多寬的位置。同一張卡片,放在窄側欄和放在寬主欄,理應長得不一樣,但媒體查詢辦不到,因為視窗寬度是同一個。這正是容器查詢(container queries)要解決的問題——它讓元件根據自己所在容器的尺寸來調整樣式,元件因此真正可攜、可重用,擺到哪都對。
.card-wrapper { container-type: inline-size; }
@container (min-width: 30em) {
.card { display: grid; grid-template-columns: auto 1fr; }
}好消息是它已經成熟到可以放心用:容器查詢自 2023 年起就達到 Baseline,主流瀏覽器(Chrome 105+、Safari 16+、Firefox 110+)全面支援,到 2026 年全球覆蓋率約九成以上。這是過去十年響應式設計最重要的一次典範轉移:從「頁面層級的響應」走向「元件層級的響應」,和元件化開發的世界觀完全契合。
觸控目標尺寸:響應式與無障礙的交會點
這裡正好接回昨天的無障礙。桌面用滑鼠,游標是一個像素點,可以精準點到很小的連結;但手機用手指,指腹接觸面積大得多,太小或太擠的按鈕會讓人一直點錯。WCAG 2.2 新增的成功準則 2.5.8「目標尺寸(最小)」(AA 級)要求可點擊目標至少 24×24 CSS 像素;而業界慣例更寬鬆保守——Apple 人機介面指南建議 44×44pt、Material Design 建議 48×48dp。除了尺寸,目標之間還要留足夠間距,避免「胖手指」誤觸。這說明響應式設計絕不只是「把版面縮小塞進手機」,而是連互動方式都要跟著輸入裝置改變:滑鼠靠 hover 提示,觸控沒有 hover,你得換個方式表達可點擊性。
最常見的錯:只在幾個固定寬度測試
最後講一個幾乎人人都犯過的錯:打開開發者工具的裝置模擬器,切到 iPhone、iPad、桌面三個預設寬度,看起來都沒破就收工。問題在於——真實世界的螢幕寬度是連續的,使用者的視窗可能停在你從沒測過的任何一個中間值:分割視窗的一半、把瀏覽器拖到螢幕左邊三分之一、橫著拿的折疊機。正確的測試方法是抓住視窗邊緣慢慢地、連續地拖動,從最窄拉到最寬,眼睛盯著版面在哪個瞬間「爆掉」:文字擠成一團、圖片變形、按鈕疊在一起、橫向出現討厭的捲軸。那些破綻幾乎都藏在兩個預設斷點之間的縫隙裡。順帶一提,別忘了 <meta name="viewport" content="width=device-width, initial-scale=1"> 這行——少了它,手機會把整個桌面版縮小塞進畫面,你所有的響應式努力都會白費。
🧠 記
- 響應式與無障礙同源:都是承認你控制不了使用者的處境,只能讓設計有彈性地去適應。
- 三根支柱:流動網格(相對單位)、彈性圖片(
max-width:100%與srcset)、媒體查詢(@media)。 - 斷點由內容決定,不是由裝置決定;文字讀起來累了、版面顯得尷尬了,那裡才下斷點。
- Mobile-first 是漸進增強:先寫最受限的基礎樣式,再用
min-width往上加,而非從桌面往下砍。 - 現代 CSS 減少斷點依賴:
clamp()做流動排版、Grid 的auto-fit/minmax做內在式版面、容器查詢讓元件響應自身容器(2023 起 Baseline)。 - 觸控目標最小 24×24 CSS px(WCAG 2.2 AA),業界慣例 44×44pt / 48×48dp;測試要連續拖動視窗,別只看三個固定寬度。
✍️ 實踐
挑一個你手邊的真實網頁(自己的專案或任一常用網站),做兩件十到二十分鐘內做得完的事。
第一,連續拖動測試。把瀏覽器視窗從最寬,用滑鼠抓住邊緣「慢慢地」拖到最窄,全程盯著版面。記下每一個「爆掉」的瞬間對應的大概寬度,以及具體症狀(某行字太長、某張圖變形、某排按鈕疊住、出現橫向捲軸)。把三個最明顯的問題寫下來——這些幾乎都落在固定斷點之間的縫隙。
第二,把一個固定字級改成 clamp()。挑頁面上最大的標題,看它現在的桌面字級與手機字級各是多少,然後改寫成一行 font-size: clamp(手機值, 中間用 vw 的理想值, 桌面值);,例如 clamp(1.75rem, 4vw + 1rem, 3rem)。存檔後再拖一次視窗,感受字級從「跳階變大」變成「平滑流動」的差別。做完這兩件事,你會對「連續尺寸」這個核心觀念有肌肉記憶。
🔗 延伸學習
- Media queries | web.dev(Learn Responsive Design) — Google 官方教材,直接示範「斷點依內容而非裝置決定」與範圍語法。
- CSS container queries | MDN — 容器查詢的官方文件,含
container-type、@container與尺寸/樣式查詢。 - Typography | web.dev(Learn Responsive Design) — 流動排版、行長與
clamp()在排版上的實務。 - Learn Responsive Design | web.dev — 從媒體查詢到內在式版面的完整免費課程,想系統補齊就從這裡開始。
💬 問 AI
我要為以下網頁做響應式設計審查。請扮演資深前端工程師,聚焦「內容驅動」與「現代 CSS」兩個方向。
介面情境:[貼上你的頁面描述、截圖說明或 HTML/CSS]
請針對以下面向各給具體發現與可貼上的程式碼建議:
1. 斷點檢視:目前的斷點是依裝置寬度還是依內容而定?哪裡的斷點應該重訂,理由是什麼(例如行長超過 75 字元)。
2. Mobile-first:CSS 是漸進增強(min-width 疊加)還是優雅降級?若是後者,示範怎麼改寫。
3. 現代 CSS 機會:哪些固定字級/間距可以改用 clamp() 做流動化?哪些版面可用 Grid 的 auto-fit/minmax 或容器查詢來減少媒體查詢?
4. 觸控與無障礙:可點擊目標有沒有達到最小 24×24 CSS px、間距是否足夠?hover 才出現的資訊在觸控裝置上如何處理?
5. 常見陷阱:有沒有缺 viewport meta、固定像素寬度、或只在少數裝置寬度成立的假設?
最後依「影響大小 × 修改成本」幫我排一份優先順序清單。