容器查询为自适应设计提供了一种高度动态且灵活的方法。容器查询使用 @container at 规则。这与使用 @media 的媒体查询类似，但 @container 会查询父级容器以获取样式信息，而不是查询视口和用户代理。
容器查询是新推出的基准服务的一部分。
通过响应容器大小，容器查询可以让组件适应其在界面中的位置。例如，卡片组件可以根据其放置的容器（是边栏、主打版块或页面正文内的网格）调整其大小和样式。
如下图所示，您可以将适用于宏布局的媒体查询、针对微布局的容器查询与基于用户偏好的媒体查询结合使用，从而打造功能强大的自适应设计系统。详细了解容器查询和新的自适应设计。
本文是系列文章中的一篇，探讨了电子商务公司如何使用新的 CSS 和界面功能来完善其网站。这一次，我们将深入了解一些公司如何使用容器查询以及从中受益。
redBus
redBus 为移动版和桌面版维护和提供不同的代码。在其推荐活动和商品页面上实现容器查询后，他们能够将此代码统一到这些网站的单个代码库中。这使得它们能够快速响应，并节省了开发时间。以下示例使用 cargo 页面演示这一点：
代码
在以下示例中，.bpdpCardWrapper 是父级容器，名为 bpdpSection。
如果容器 bpdpSection 的最小宽度为 744 像素，则 .bpdpCardContainer 和 .subTxt, .bpdpAddress 选择的组件的 font-size 和 line-height 会更新。
//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) 中包含商店和商品信息对应的多个标签页。以前，此页面的布局分为三列，有时如果屏幕尺寸较小，左侧的产品名称会被截断（请参见下面的“之前”视频）。
为了解决这个布局问题，他们轻松快速地采用了容器查询。实现此方案后，他们得以获得灵活的布局，其中产品名称始终完全可见（请参阅下面的“之后”视频）。
之前
之后
代码
以下代码会查询名为 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() 选择器）获益。