版面在電腦上排得好好的，縮到手機寬度就開始出狀況：圖片撐破容器、表格把整頁往右推出一截、導覽列擠成一團、按鈕小到得放大才點得到。這些都是響應式網頁設計在執行時最常見的實際問題，而且幾乎每一個都有固定的成因與固定的處理方式。
觀念的部分一句話帶過就好：讓同一份內容依照螢幕寬度自動調整排列。這篇要談的是執行，包含斷點該怎麼訂、圖片影片文字表格導覽列各自怎麼處理、觸控目標要留多大、用什麼方式測試，以及一份實務上最常見的破版原因清單。
斷點依內容決定，不要依機型清單
最常見的錯誤做法，是先去查一份熱門機型的螢幕寬度表，然後照著每一款機型設一個斷點。這條路走不通，因為機型會一直推陳出新，而且同一個尺寸在不同瀏覽器、不同縮放設定下的可用寬度也不一樣。照機型訂斷點，等於把自己綁在一份永遠會過期的清單上。
正確的做法是讓內容說話。把瀏覽器視窗從最寬慢慢往內拉，一邊拉一邊看，什麼時候版面開始變得難看或難讀，那個寬度就是一個斷點的候選位置。可能是某一欄的文字一行只剩幾個字、可能是導覽列的項目開始換行、可能是兩張並排的卡片擠到標題撞在一起。內容自己會告訴你該在哪裡切。
實務上常見的做法是先建立幾個大方向的分界，例如小螢幕、中等螢幕、大螢幕三段，常被當成起點的參考值大約在 768px 與 1024px 附近；接著再針對個別元件加上它自己的區域性斷點。不是每個元件都要在同樣的寬度換排列方式，一個特別長的表格或一組特別多項的導覽列，本來就可能比其他區塊更早需要處理。
- 先從最窄的寬度開始設計，往上加寬時再逐步增加欄位，通常比從寬往窄砍要順
- 斷點數量不是愈多愈好，每多一個就多一份要測試與維護的狀態
- 斷點的位置寫在樣式裡要能一眼看懂，避免散落各處出現互相打架的規則
圖片與影片怎麼處理才不會撐破版面
圖片最基本的處理是讓它的最大寬度不超過容器，這樣不管容器縮到多窄，圖片都會跟著縮而不會把版面頂開。這一條沒設好，就是手機上出現橫向捲動最常見的原因之一。同時要讓高度自動計算，否則圖片會被壓扁或拉長。
再進一步是讓不同寬度的螢幕載入不同尺寸的檔案。做法是用 srcset 搭配 sizes，提供同一張圖的數種尺寸，讓瀏覽器自己挑最合適的那一份下載。手機沒有必要下載為大螢幕準備的高解析檔案，這件事對小螢幕的載入體驗影響相當直接。
如果不只是尺寸不同，而是構圖需要不同，例如寬螢幕用橫式的情境照、窄螢幕要換成能看清楚主體的直式裁切，那就屬於藝術指導的範疇，需要用 picture 搭配多組來源來切換，而不是單純縮放同一張圖。
影片的處理邏輯類似但多一個麻煩：嵌入的影片通常帶著固定的寬高。實務上會把影片包在一個維持固定長寬比的容器裡，讓影片填滿容器，容器寬度隨版面伸縮，比例就不會跑掉。另外要記得替影片與圖片預留空間，避免內容載入完成後版面突然跳動。
字級、行距與行寬的縮放方式
小螢幕上的文字不是愈小愈好。內文字級被壓得太小，使用者會本能地放大頁面，一放大就開始左右滑動，體驗直接崩壞。實務上的原則是內文在手機上維持一個舒服可讀的大小，需要縮的是標題而不是內文。桌機上很有氣勢的巨大標題，搬到手機上往往一行塞不下，必須另外給一組較小的尺寸。
行距在窄螢幕上要比寬螢幕再鬆一點。螢幕窄代表同樣的段落會被拆成更多行，行數一多，行與行之間太擠就容易看串行。行寬也要顧，一行文字太長會讓眼睛找不到下一行的開頭，所以在大螢幕上通常會替內文區塊設一個最大寬度，不讓它無限撐開。
還有兩個容易被忽略的點：一是長英文網址或沒有空格的長字串會撐破容器，需要允許它斷行；二是文字與背景的對比在戶外的手機螢幕上會比在室內螢幕前更難辨識，淺灰配白這種在電腦上看起來很雅緻的搭配，到手機上常常變成看不清楚。
表格與導覽列在窄螢幕的處理
表格是窄螢幕的頭號麻煩，因為表格天生需要橫向空間。常見的處理方式有四種，各有適用情境。第一種是把表格包在可以橫向捲動的容器裡，讓表格自己滑，其他版面不受影響，做法簡單但要給使用者明顯的提示，否則他不會知道右邊還有內容。
第二種是轉成卡片式呈現，每一列變成一張獨立的區塊，欄位名稱與值上下排列。可讀性最好，但跨列比較數值的能力就沒了。第三種是隱藏次要欄位，只保留關鍵的幾欄，適合欄位重要性差異明顯的表格。第四種是把第一欄固定住，其餘欄位橫捲，讓使用者滑動時還知道自己在看哪一列。
導覽列的處理則是另一個典型題目。項目多的時候在窄螢幕收成選單按鈕是常見解法，但要注意幾件事：按鈕本身要夠明顯、展開後的層級不要太深、目前所在位置要標示清楚、關閉方式要直覺。把桌機那套多層下拉選單原封不動搬到手機，通常是災難的開始。
- 導覽列收合後，最重要的兩三個入口可以考慮保留在外面不收進去
- 搜尋框在窄螢幕常被收成圖示，但圖示要讓人看得懂那是搜尋
- 頁尾的連結群組在手機上疊起來會變得很長，適度分組或收合會好一些
觸控目標尺寸與手指可及範圍
滑鼠游標的尖端是一個點，手指按下去卻是一塊面積。這個差異決定了可點擊元素在觸控裝置上必須夠大。業界普遍引用的建議是觸控目標至少要有 44px 左右的邊長，而且相鄰的可點擊元素之間要留出間隔，避免使用者按到隔壁那一個。
要注意的是，觸控目標的尺寸指的是可點擊區域，不是視覺上看到的圖案大小。一個看起來只有二十幾像素的小圖示，只要它外圍的可點擊範圍撐到足夠大，實際使用起來就沒問題。這是很多設計稿看起來很精緻、實際用起來很難按的原因：只做了視覺尺寸，沒做可點擊範圍。
另外要考慮單手持握時拇指能輕鬆碰到的區域。螢幕上方角落是最難按到的位置，把主要行動按鈕放在那裡並不理想。表單的送出鈕、加入購物車、預約諮詢這類關鍵動作，放在偏下方或做成隨頁面固定的形式通常比較好按，但固定元素不能佔掉太多螢幕高度，也不能擋住內容。
測試方法與工具
第一層測試最省事：直接在桌機瀏覽器把視窗從最寬慢慢拉到最窄，全程盯著版面看。這個動作能抓出大部分的問題，包括撐破容器、元素重疊、文字擠成一團。很多人跳過這一步直接用開發者工具的裝置模擬，反而漏掉那些發生在兩個預設尺寸之間的破版。
第二層是瀏覽器內建的開發者工具。它可以模擬各種寬高、切換直橫向、模擬觸控，還能直接看到目前套用了哪些樣式規則，找出是哪一條規則造成破版。調斷點的時候，它顯示的即時寬度數值特別好用。
第三層是真機測試，這一層不能省。模擬器再準也重現不了真實的觸控手感、系統字型差異、網址列收合造成的高度變化、以及在陽光下的可讀性。手邊能拿到的手機與平板都開來看一遍，尤其要涵蓋比較舊、螢幕比較小的機型。
- 順手用 Google 的行動裝置相關檢測工具看一遍，能抓出明顯的可用性問題
- 測試時記得也看橫向擺放的狀態，很多版面只測過直向
- 把瀏覽器的字級調大再看一次，有些版面在使用者放大字體後會整個垮掉
響應式網頁設計最常見的破版原因清單
下面這些原因幾乎涵蓋了實務上八成以上的響應式網頁設計破版狀況，出問題時可以照著順序排查。
- 某個元素被設了固定的像素寬度，窄螢幕縮不下去，整頁被往右推出去
- 圖片沒有設定最大寬度限制，原尺寸直接撐破容器
- 長網址、長英文字串或程式碼區塊不允許斷行，硬是把容器撐開
- 表格沒有任何窄螢幕處理，整個把版面頂出螢幕
- 用負邊距或絕對定位硬排的區塊，換到窄螢幕後位置完全跑掉
- 斷點只照著幾款機型設，兩個斷點之間的寬度沒人看過，一拉到那個區間就破
- 把桌機版的多層下拉選單原樣搬到手機，展開後看不完也關不掉
- 設了最小寬度但忘了它會在小螢幕生效，容器再也縮不下去
- 字級用了會隨螢幕無限縮放的設定，在極小或極大螢幕上失控
- 固定在畫面上的浮動元素在小螢幕佔掉太多高度，內容被擠得只剩一條縫
排查的訣竅是先找出到底是哪一個元素造成橫向捲動。開發者工具可以逐層檢視，或用暫時替所有元素加上外框的方式讓超出範圍的那一個現形，找到之後通常一眼就知道是上面哪一種情況。
常見問題
斷點到底該設幾個才夠？
沒有標準答案，但實務上多數網站三到四個主要斷點就能覆蓋絕大部分情境，再視個別元件補上區域性的調整。判斷的依據不是數量，而是把視窗從最寬拉到最窄的過程中，有沒有任何一段寬度是版面不能看的。只要有，就還缺一個斷點。
一定要先做手機版再做桌機版嗎？
不是硬性規定，但從窄往寬做通常比較順。原因是窄螢幕的空間最有限，會逼你先決定什麼最重要；先做寬螢幕再往下砍，容易砍到最後發現沒東西可砍，只好硬塞。順序選哪一種都能做出好結果，只是從窄開始踩的坑比較少。
圖片一定要用 srcset 嗎？
不是每張都需要。裝飾用的小圖示、尺寸本來就很小的圖，多準備幾份的效益有限。真正該處理的是大面積的主視覺、文章首圖、商品圖這類體積明顯的圖片，這些才是小螢幕上的負擔來源。
做完響應式調整，會不會影響到原本的桌機版面？
如果調整方式是在既有樣式上加條件規則，理論上桌機版不受影響，但實務上常會因為規則覆蓋順序而出現意外。所以每次調完窄螢幕，都應該回頭把寬螢幕再看一遍，不要只測改動的那一端。
響應式網頁設計的執行並不神秘，它比較像是一份需要按部就班檢查的清單：斷點依內容訂、圖片與影片給上限、文字保持可讀、表格與導覽列另尋出路、可點的地方留足空間，最後拉著視窗和真機各走一遍。把這幾件事做紮實，那些讓人頭痛的破版狀況多半就不會發生了。