在小螢幕上瀏覽的設計，在大螢幕版面配置中不應呈現縮小版本。同樣地，在大螢幕上檢視的設計也不應當小螢幕版面配置的粗糙版本。相反地，設計必須靈活，才能配合所有螢幕大小。成功的回應式設計能讓所有板型規格發揮最大效用。
這意味著部分介面元素，可能會因這些元素所處的情境而有明顯差異。您可能需要對相同的 HTML 程式碼集套用非常不同的 CSS，才能充分發揮各種螢幕大小。這可是一項設計挑戰！
以下列舉幾個您可能遇到的常見難題。
瀏覽
在大螢幕上顯示導覽連結清單相當簡單。有足夠的空間可容納這些連結。
小螢幕上的空間比較大，為這種情況進行設計時，您可能會想隱藏在按鈕後方的導覽功能。這個解決方案的問題是，使用者必須完成兩個步驟才能前往任何位置：開啟選單，然後選擇所需選項。選單開啟前，使用者總是想知道：「我可以去哪找地方？」
請試著找出避免隱藏導覽列的策略。如果項目的數量相對較少，可以設定導覽樣式，以便在小螢幕上清楚顯示。
如果您的導覽含有大量連結，該模式就不會縮放。如果連結在小螢幕上以兩、三行呈現，導覽畫面會顯得雜亂。
其中一種可能的解決方式是將連結放在單行，但將清單截斷在畫面邊緣。使用者可以水平滑動，查看無法立即看見的連結。這是溢位模式。
這個技術的優點是可縮放至任何裝置寬度和任意數量的連結。缺點是使用者可能會錯過最初未顯示的連結。如果您在主要導覽中使用了這項技巧，請確認前幾個連結是最重要的連結，並以視覺化的方式指出清單中還有更多項目。上一個範例針對這個指標使用漸層。
萬不得已的情況下，您可以選擇將導覽預設為隱藏，並提供切換機制，供使用者顯示及隱藏內容。這就是所謂的漸進式揭露。
確認用於切換導覽顯示方式的按鈕已加上標籤。請勿只仰賴圖示中的細節就能理解。
未加標籤的圖示是「神秘肉品」瀏覽，使用者必須先吸收它，才能知道裡面有什麼。提供文字標籤，讓使用者知道按鈕將顯示的內容。
輪轉
導覽的真正涵義也適用於其他內容：仍要不要隱藏任何內容。輪轉介面是一種隱藏內容的常見方法。看起來很簡潔，但使用者也可能永遠不會找到隱藏的內容。輪轉介面更能有效解決組織問題，例如首頁應提供什麼內容，而非為使用者提供服務。
換句話說，當空間比較昂貴時，輪轉介面可能會導致網頁耗時太久且雜亂無章。您可以採用混合型做法：以小螢幕的輪轉介面顯示內容，同時在較大的螢幕以格狀檢視模式顯示相同的內容。
如果是較小的螢幕，可以使用 Flexbox 將項目排成一列。項目列就會超出畫面邊緣。使用 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 等媒體功能只是第一步。接著，我們將進一步介紹其他媒體功能，