後台不是只有大螢幕在用，主管在手機上批東西、有人全程鍵盤操作、有人靠螢幕閱讀器。這章把「換螢幕怎麼變形」跟「無障礙的底線」放在一起講，因為它們常常一起被忘記。當你要把 desktop 版面塞進手機、或被問「這個能不能用鍵盤點」時，翻這頁對一下規格。
這是什麼
從超小到手機到大桌機的六段斷點；平板以下側邊欄改為抽屜式選單。
什麼時候用
規劃後台在不同螢幕寬度下的版面配置與導覽型態。
| 名稱 | min-width | 對應裝置 |
|---|---|---|
| xs | < 576 | 手機直 |
| sm | 576 | 手機橫 |
| md | 768 | 平板直 |
| lg | 992 | 平板橫 / 小筆電 |
| xl | 1200 | 桌機 |
| xxl | 1600 | 大桌機 |
這是什麼
手機上側欄改漢堡抽屜、對話框改底部滑出面板；原本靠 hover 的互動需提供點擊替代。
什麼時候用
把桌面版後台適配到小螢幕，避免 hover -only 或過寬表格。
這是什麼
可點區域至少符合 iOS 44 點、Android 48 密度獨立像素；圖示視覺可較小，但點擊範圍要夠大。
什麼時候用
設計手機版按鈕、圖示列、表格操作時，避免誤觸或點不到。
這是什麼
所有可用鍵盤聚焦的元素都要有清楚的外框或光環，與背景對比至少 3:1。
什麼時候用
鍵盤或輔助科技使用者需要在介面中辨識目前焦點位置。
outline: none 然後沒補替代。這是什麼
內文與背景對比至少 4.5:1，大標題至少 3:1；成功／錯誤等狀態需搭配圖示或文字，不能只靠顏色。
什麼時候用
選色與排版時確保可讀性，並符合無障礙對比標準。
這是什麼
使用者按 Tab 第一次聚焦時，可先跳到「略過導覽、至主內容」連結，避免逐項掃過整個側欄。
什麼時候用
頁面有長側欄或重複導覽時，加速鍵盤使用者進入主工作區。