此页面由 Cloud Translation API 翻译。

容器查询案例研究

Swetha Gopalakrishnan

Saurabh Rajpal

容器查询提供高度动态、灵活的自适应方法设计。容器查询使用 @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">

来源

通过响应容器大小，容器查询可让组件进行调整将用户引导到其所在的位置例如，卡片组件可以调整其无论是边栏还是主打图片，部分或网页正文中的网格。

如下图所示，您可以将媒体查询组合为宏，微布局的容器查询，以及基于用户偏好设置的媒体以便创建一个强大的自适应设计系统。已读容器查询以及全新的自适应设计。

本文是系列文章中的一篇，该系列文章讨论了电子商务公司他们使用新的 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> <ph type="x-smartling-placeholder">

在实现容器查询之前，先显示“ISKU 10 in 1 Obeng” 饱和度...”左上角的图标被截断了，以适应较小的屏幕尺寸。

之后

</ph> <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

资源：

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