在小螢幕上檢視的設計不應是縮小版的大螢幕版面配置。同樣地，在大螢幕上檢視設計時，不應看起來像是小螢幕版面配置的放大版。設計必須夠彈性，才能配合所有螢幕大小調整。成功的回應式設計可充分運用各種板型規格。
也就是說，某些介面元素可能需要根據顯示情境而有相當大的差異。您可能需要對相同的 HTML 程式碼集套用截然不同的 CSS，才能充分利用不同螢幕大小。這項設計挑戰相當艱鉅！
以下列舉一些常見的挑戰。
導覽
在大螢幕上顯示導覽連結清單相當簡單，因此有足夠空間容納這些連結。
在小螢幕上，空間非常寶貴。在這種情況下進行設計時，您可能會想將導覽功能隱藏在按鈕後方。這個解決方案的問題在於，使用者必須執行兩個步驟才能完成操作：開啟選單，然後選擇選項。在開啟選單前，使用者會想知道「我可以去哪裡？」
請盡量避免隱藏導覽列，如果項目數量相對較少，可以設定導覽樣式，讓導覽在小螢幕上看起來美觀。
如果導覽列有很多連結，這種模式就無法擴充。如果連結在小螢幕上換行成兩到三行，導覽看起來就會很雜亂。
其中一個可能的解決方法是將連結保留在一行，但將清單截斷在螢幕邊緣。使用者可以水平滑動，顯示未立即顯示的連結。這是溢位模式。
這項技術的優點是可根據任何裝置寬度和連結數量調整大小。缺點是使用者可能會錯過一開始未顯示的連結。如果將這項技術用於主要導覽，請確保前幾個連結是最重要的，並以視覺化方式指出清單中還有其他項目。上一個範例會使用漸層做為指標。
最後，您可以選擇預設隱藏導覽列，並提供切換機制，讓使用者顯示及隱藏內容。這就是所謂的「逐步揭露」。
確認切換導覽顯示畫面的按鈕已加上標籤。請勿只使用圖示來傳達資訊。
沒有標籤的圖示是「神秘肉」導覽，使用者必須點選才能知道內容。提供文字標籤，讓使用者瞭解按鈕會顯示哪些內容。
輪轉介面
導覽列是這樣，其他內容也是如此：盡量不要隱藏任何內容。輪轉介面是隱藏內容的常見方式。這樣做看起來很整齊，但使用者很可能永遠不會發現隱藏的內容。輪播內容較適合解決機構問題 (例如首頁應顯示哪些內容)，而非服務使用者。
不過，如果空間有限，輪轉介面可避免網頁過長和雜亂。您可以採用混合式做法：在小螢幕上以輪轉介面顯示內容，但在大螢幕上以格線顯示相同內容。
如果是窄螢幕，請使用彈性方塊，以單列顯示項目。項目列會超出螢幕邊緣。使用 overflow-x: auto 允許水平滑動。
@media (max-width: 50em) {
.cards {
display: flex;
flex-direction: row;
overflow-x: auto;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;
}
.cards .card {
flex-shrink: 0;
flex-basis: 15em;
scroll-snap-align: start;
}
}
scroll-snap 屬性可確保項目滑動時的流暢感。有了 scroll-snap-type: inline mandatory，項目就會自動貼齊。
當畫面夠大時 (在本例中，寬度大於 50em)，切換至格線並以資料列和資料欄顯示項目，不隱藏任何內容。
@media (min-width: 50em) {
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
}
}
最重要的是，輪轉介面中的項目不會佔滿整個寬度。如果有的話，系統就不會顯示更多內容超出檢視區塊邊緣的指標。
輪播是溢位模式的另一個例子。如果使用者可瀏覽的項目很多，即使是在電視等大型螢幕上，您也可以繼續使用溢位模式。這個媒體捲軸使用多個輪播來管理大量選項。
同樣地，scroll-snap 屬性可確保互動過程順暢。此外，請注意輪播中的圖片已套用 loading="lazy"。在這種情況下，圖片並非位於首頁下方，而是超出邊緣，但原理相同：如果使用者從未滑動到該項目，系統就不會下載圖片，節省頻寬。
加入 JavaScript 後，您可以在輪轉介面中新增互動式控制項。你甚至可以讓系統自動循環瀏覽項目。但請務必審慎考慮，因為如果輪轉介面是網頁上唯一的內容，自動播放或許可行，但如果使用者想與其他內容互動 (例如閱讀文字)，自動播放的輪轉介面就會非常惱人。如要瞭解更多輪播最佳做法，請參閱這篇文章。
資料表
table 元素非常適合用於建構表格式資料，也就是相關資訊的資料列和資料欄。但如果表格過大，可能會破壞小螢幕版面配置。
你可以對表格套用溢位模式。在本範例中，表格會包在 div 中，並具有 table-container 類別。
.table-container {
max-inline-size: 100%;
overflow-x: auto;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;
}
.table-container th,
.table-container td {
scroll-snap-align: start;
padding: var(--metric-box-spacing);
}
規範
溢位模式是小螢幕的折衷方案，但請務必清楚標示螢幕外內容可供存取。建議在內容遭到截斷的邊緣加上陰影或漸層。
漸進式揭露是節省空間的實用方法，但請謹慎使用，以免重要內容遭到隱藏。較適合次要動作。確保觸發揭露聲明的介面元素標示清楚，不要只使用圖示。
請先設計適合小螢幕的版面配置。相較於將大螢幕設計調整為小螢幕設計，將小螢幕設計調整為大螢幕設計會比較容易。如果先設計大螢幕，小螢幕設計可能會感覺像是事後才考慮到的問題。
如要瞭解更多版面配置和 UI 元素模式，請參閱 web.dev 的「模式」專區。
將介面元素調整為適合不同螢幕大小時，媒體查詢有助於判斷裝置尺寸。但 min-width 和 min-height 等媒體功能只是開端。接著，你將會發現許多其他媒體功能。