在小屏幕上查看的设计不应看起来像大屏幕布局的缩小版本。同样，在大屏幕上查看的设计不应看起来像小屏幕布局的放大版本。相反，设计需要足够灵活，以适应所有屏幕尺寸。成功的自适应设计可充分利用各种外形规格的设备。
这意味着，某些界面元素的外观可能需要完全不同，具体取决于用户查看时所处的情境。您可能需要对同一 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 等媒体功能仅仅是个开始。接下来，您将发现各种其他媒体功能。