在小屏幕上查看的设计不应看起来像是缩小版的大屏幕布局。同样，在大屏幕上查看的设计不应看起来像是小屏幕布局的放大版。相反，设计需要足够灵活，能够适应所有屏幕尺寸。成功的响应式设计可充分利用每种外形规格。
这意味着，某些界面元素可能需要根据其显示环境而呈现出截然不同的外观。您可能需要对同一 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);
}
指南
对于小屏幕，溢出模式是不错的折中方案，但请务必明确指出屏幕外的内容可以访问。考虑在内容被截断的边缘放置阴影或渐变效果。
逐步披露是一种节省空间的实用方法，但请谨慎使用，以免影响非常重要的内容。更适合次要操作。确保触发披露信息的界面元素有明确的标签，不要仅依赖图标。
优先针对小屏幕进行设计。将小屏幕设计调整为大屏幕设计比反过来要容易得多。如果您先针对大屏设备进行设计，那么小屏设备设计可能会显得考虑不周。
如需了解更多布局和界面元素模式，请探索 web.dev 的模式部分。
在调整界面元素以适应不同的屏幕尺寸时，媒体查询对于确定设备的尺寸非常有用。但 min-width 和 min-height 等媒体功能只是一个开始。接下来，您将了解许多其他媒体功能。