容器查询案例研究

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X LinkedIn
Saurabh Rajpal
Saurabh Rajpal
X LinkedIn

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

通过响应容器大小，容器查询可让组件适应其在界面中的位置。例如，卡片组件可以根据其所在的容器（无论是边栏、首页横幅部分还是页面正文中的网格）调整其大小和样式。

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

图片：显示不同类型的样式如何协同工作。
web.dev - 新的自适应设计。

本文是系列文章的一部分，该系列文章讨论了电子商务公司 如何使用新的 CSS 和界面功能来增强其网站。这次，我们将深入探讨一些公司如何使用容器查询并从中受益。

redBus

redBus 为其移动版和桌面版维护和提供不同的代码。 在 “待办事项”和 货运页面上实现容器查询后，他们能够将这些代码 统一到这些网站的单个代码库中。这使得他们能够实现自适应，并节省了开发时间。以下示例使用货运页面对此进行了演示：

代码

在以下示例中，.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 Obeng satu..”字词会被截断，以适应较小的屏幕尺寸。

之后

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

代码

以下代码查询名为 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 通过查看网站上的文本省略号找到了自己的用例。 这表明容器可能太小，导致内容被截断，用户无法看到完整内容。

电子商务网站的容器查询的另一个不错的用例是查找重复使用的组件。例如，添加到购物车 按钮可能会根据父容器的不同而显示不同（例如，如果按钮位于商品卡片中，则仅显示图标；如果按钮是页面上的主要号召性用语，则显示图标和文本）。该按钮可能是容器查询的理想选择。

您可以选择对网站进行增量改进。例如，您可以从较小的用例（例如 Tokopedia 中的省略号示例）开始，并在其中实现容器查询。然后，逐步找到更多用例并改进 CSS。

资源：

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