在小屏幕上查看的设计不应看起来像是大屏幕布局的缩小版本。同样，在大屏幕上查看的设计不应看起来像是小屏幕布局的放大版本。相反，设计需要足够灵活以适应所有屏幕尺寸。成功的自适应设计可以最大限度地利用每种外形尺寸。
这意味着某些界面元素可能需要根据其查看的上下文看起来大相径庭。您可能需要对相同的 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);
}
指南
溢出模式是小屏幕的一个很好的折衷方案，但请确保明确表明可以访问屏幕外的内容。考虑在内容被截断的边缘放置阴影或渐变。
渐进式披露是节省空间的有用方法，但请谨慎将其用于非常重要的内容。它更适合辅助操作。确保触发披露的界面元素被清楚地标记 - 不要仅仅依赖于图标。
首先为较小的屏幕设计。将小屏幕设计调整为大屏幕比反过来更容易。如果您首先为大屏幕设计，则存在小屏幕设计感觉像是事后诸葛亮的危险。
有关更多布局和 UI 元素模式，请浏览 web.dev 模式部分。
当您调整界面元素以适应不同的屏幕尺寸时，媒体查询对于确定设备的尺寸非常有用。但是，诸如 min-width 和 min-height 之类的媒体功能仅仅是开始。接下来，您将发现许多其他媒体功能。