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