此页面由 Cloud Translation API 翻译。

容器查询案例研究

Swetha Gopalakrishnan

Saurabh Rajpal

容器查询是一种高度动态且灵活的自适应设计方法。容器查询使用 @container at-rule。这与使用 @media 的媒体查询类似，但 @container 会查询父容器以获取样式信息，而不是查询视口和用户代理。

容器查询属于新推出的基准。

浏览器支持

来源

通过响应容器大小，容器查询可让组件适应其在界面中的位置。例如，卡片组件可以根据其放置的容器（可能是边栏、主推区或网页正文中的网格）调整其大小和样式。

如以下插图所示，您可以将适用于宏观布局的媒体查询、适用于微观布局的容器查询与基于用户偏好的媒体查询相结合，以创建强大的响应式设计系统。详细了解容器查询和新的响应式设计。

一张图片，展示了不同类型的样式如何协同发挥作用。 — web.dev - 全新响应式设计。

本文是系列文章的一部分，介绍了电子商务公司如何使用新的 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) 包含多个用于显示商店和商品信息的标签页。以前，此页面的布局分为三列，在屏幕尺寸较小时，左侧的商品名称有时会被截断（请参阅以下“之前”视频）。

为了解决此布局问题，他们轻松又快速地采用了容器查询。实现此功能后，他们能够采用灵活的布局，确保商品名称始终完全显示（请参阅以下“后”视频）。

之前

在实现容器查询之前，如果屏幕尺寸较小，左上角的“ISKU 10 in 1 Obengsatu..”字样会被截断。

之后

实现容器查询会调整布局，使文本保持在视口内。

代码

以下代码会查询名为 infowrapper 的父容器的大小。如果 infowrapper 的最大宽度为 360px，则子组件的 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。

资源：

探索本系列中的其他文章，了解电子商务公司如何通过使用新的 CSS 和界面功能（例如滚动驱动型动画、弹出式窗口、容器查询和 has() 选择器）获益。