在小屏幕上查看的设计不应看起来像大屏幕布局的缩小版本。同样，在大屏幕上查看的设计不应该看起来像是小屏幕布局的放大版本。相反，设计需要足够灵活，以适应所有屏幕尺寸。成功的响应式设计可以充分利用各种外形规格的设备。
也就是说，某些界面元素的外观可能因查看时所处的环境而异。您可能需要对同一 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 元素非常适合用于结构化表格数据；行和列的相关信息。但是，如果表格过大，则可能会破坏您的小屏幕布局。
您可以将溢出模式应用于表。在此示例中，表封装在类为 table-container 的 div 中。
.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);
}
指南
溢出模式对于小屏幕来说是一个很好的折衷方案，但要确保用户清楚地知道屏幕外的内容可触及。考虑在内容被截断的边缘添加阴影或渐变效果。
渐进式披露可以有效节省空间，但对于非常重要的内容，使用时应谨慎。它更适合于次要操作。确保为触发披露声明的界面元素添加明确标示，不要只使用图标。
优先针对小屏幕进行设计。让小屏幕设计适应大屏幕比将小屏幕设计适应大屏幕更容易。如果先针对大屏设备进行设计，有可能会出现用户后来想到的小屏幕设计。
如需了解更多布局和界面元素模式，请参阅 web.dev 模式部分。
当您根据不同的屏幕尺寸调整界面元素时，媒体查询对于确定设备的尺寸非常有用。但 min-width 和 min-height 等媒体功能只是开始。接下来，您将发现众多其他媒体功能。