容器查询
提供高度动态、灵活的自适应方法
设计。容器查询使用 @container
at-rule。这适用于
设置为使用 @media
进行媒体查询,但 @container
会查询父查询
而非视口和用户代理的容器。
容器查询是新推出的基准的一部分。
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
通过响应容器大小,容器查询可让组件进行调整 将用户引导到其所在的位置例如,卡片组件可以调整其 无论是边栏还是主打图片, 部分或网页正文中的网格。
如下图所示,您可以将媒体查询组合为宏, 微布局的容器查询,以及基于用户偏好设置的媒体 以便创建一个强大的自适应设计系统。已读 容器查询以及 全新的自适应设计。
<ph type="x-smartling-placeholder">![显示不同类型的样式如何协同工作的图片。](https://developer.chrome.google.cn/static/blog/css-ui-ecommerce-cq/image/new-responsive.png?authuser=7&hl=ro)
本文是系列文章中的一篇,该系列文章讨论了电子商务公司 他们使用新的 CSS 和界面功能改善了他们的网站。这一次,我们将深入介绍 了解一些公司如何使用容器查询并从中受益。
redBus
redBus 为其移动版和桌面版维护并提供不同的代码。 在其应用上实施容器查询后, 推荐活动和 cargo 页面,他们能够统一此代码 放入这些网站的单个代码库中。这使它们能够及时响应并 开发时间。以下示例使用货运页面演示了这一点:
代码
在以下示例中,.bpdpCardWrapper
是父级容器,
名为 bpdpSection
。
如果容器 bpdpSection
的最小宽度为 744 像素,则 font-size
和 line-height
,分别对应 .bpdpCardContainer
和
.subTxt, .bpdpAddress
已更新。
//Code for Container Queries
.bpdpCardWrapper {
container-type: inline-size;
container-name: bpdpSection;
}
@container bpdpSection (min-width: 744px){
.bpdpCardContainer{
font-size: 1rem;
line-height: 1.5rem;
}
.subTxt, .bpdpAddress{
font-size: 0.875rem;
line-height: 1.25rem;
}
}
影响
更新前(多个代码库) | 之后 (单个代码库) | |
---|---|---|
基础架构 | 独立的基础架构(费用高)。 | 相同的基础架构(费用更低)。 |
设计 | 界面独立,但一致性差。 | 很难解决,但也能实现。 |
性能 | 由于系统是独立的,易于处理,但性能改进工作是重复的。 | 这是特定于网页和功能的,但 redBus PageSpeedInsights 得分高于 80。 |
开发 | 单独的开发团队。 | 时间缩短了 30% - 40%。 |
Tokopedia
Tokopedia 的商品详情页面 (PDP) 包含多个与商店和 产品信息。以前,此页面的布局分为 有时,由于尺寸较小,左侧的产品名称 屏幕大小(请观看下面的“之前”视频)。
为了解决这种布局问题,他们轻松快速地采用了容器查询。 实施该解决方案后,他们能够拥有一个灵活的布局, 产品名称始终完全可见(请观看以下“之后”视频)。
之前
<ph type="x-smartling-placeholder">之后
<ph type="x-smartling-placeholder">代码
以下代码查询名为 infowrapper
的父级容器的大小。
如果 infowrapper
的最大宽度为 360 像素,则子组件的
调整了 width
、margin,
和 padding
。
将 container-type
设置为 inline-size
会查询内嵌方向的大小
父级容器。在英语等拉丁语言中,这指的是
父级容器,因为文本从左到右以内嵌方式流动。
export const styCredibilityContainer = css`
container-name: infowrapper;
container-type: inline-size;
`;
export const styBtnShopFollow = css`
margin-left: auto;
width: 98px;
@container infowrapper (max-width: 360px) {
width: 100%;
margin-top: 2px;
margin-bottom: 8px;
padding-left: 60px;
}
`;
export const styBottomRow = css`
margin-top: 4px;
padding-left: 60px;
display: flex;
align-items: center;
@container infowrapper (max-width: 360px) {
padding-left: 0px;
}
> div {
text-align: left;
margin-top: 0 !important;
}
`;
使用容器查询时的注意事项
Tokopedia 通过查找其网站上的文本省略号找到了他们的应用场景。 这表示容器可能过小,导致内容被剪切 以及为用户停用这一功能
电子商务网站的容器查询的另一个好用就是 对重复使用的组件进行优化例如,系统可能会显示添加到购物车按钮 (例如,仅当图标位于父容器中时, 商品卡片和带有文字的图标(如果它是网页上的主要 CTA)。通过 按钮很适合进行容器查询。
您可以选择对网站进行增量改进。例如,您 可以先从较小的应用场景开始,比如 Tokopedia 中的椭圆示例。 在其中实施容器查询然后,逐步查找更多支持请求 改进 CSS
资源:
- 容器查询登陆稳定版浏览器
- 容器查询 - 浏览器设计
- 容器查询演示
- 演示:容器查询卡片
- 视频:网页界面的新变化 - 2023 年 I/O 大会
- 您想要报告 bug 或请求新功能吗?我们期待收到您的反馈意见。
敬请阅读本系列中的其他文章,了解电子商务如何
公司受益于新推出的 CSS 和界面功能,例如滚动驱动型
动画、弹出式窗口、容器查询和 has()
选择器。