该组件是一个类为.c-media的项目，其父元素是.o-grid__item元素。在CSS中我们可以这样做：.o-grid__item{contain:layoutinline-sizestyle;}.c-media{/*Defaultstyle*/}@container(min-width:320px){.c-media{/*样式*/}}@container(min-width:450px){.c-media{/*样式*/}}首先，我们告诉浏览器每个带有类.o-grid的元素是一个容器。然后，告诉浏览器，如果父元素的宽度等于或大于500px，就应该进行不同的显示。700px查询也是如此。这就是CSS容器查询的工作原理。此外，我们可以在任何需要的地方定义它们，这意味着我们可以在需要时查询顶级容器。既然大家已经了解了CSS容器查询的基本思路，那么看下图加深一下印象吧。在左侧，这是一个正在调整大小的视口。右边，一个根据父组件的宽度变化的组件。这就是容器查询的力量和目的。将容器查询作为UI进行设计时，您需要适应这一革命性的CSS功能，因为它将改变我们设计Web的方式。我们不仅要针对屏幕尺寸进行设计，还要考虑当容器的宽度发生变化时，组件应该如何适配。如今，设计系统变得越来越流行。设计团队将构建一组规则和组件，以便其他成员可以基于它们构建页面。随着CSS容器查询的出现，我们还在设计组件应如何根据其父组件的宽度调整大小。考虑以下设计：请注意，我们有标题、文章部分、引文和时事通讯。它们中的每一个都应该适合父视图的宽度。我可以将这些组件分为以下几个部分Viewport（媒体查询）Parent（容器查询）General：不受影响的组件，例如按钮、标签、段落。对于示例UI，以下是我们划分组件的方式。当我们在设计UI时以这种思维方式思考时，我们可以开始考虑依赖于父级宽度的组件的不同变体。在下图中，请注意文章组件的每个变体如何以特定宽度开始。作为设计师，一开始考虑父宽度可能有点奇怪，但这是未来的方式。我们为前端开发人员提供他们可以使用的每个组件的详细信息和版本。不仅如此，我们可能还有一个组件的变体，它应该只在特定的上下文中显示。例如，活动列表页面。在这种情况下，重要的是要清楚在何处使用此变体。问题是，如何告诉设计者应该在哪里使用这些组件。与开发人员的沟通良好的沟通是项目成功的重要因素。作为设计师，我们应该提供关于应该在何处使用组件变体的指导。它可以是一个完整的页面设计，也可以是一个显示每个组件如何使用的简单图表。请注意我如何将每个变体映射到特定的上下文，而不是视口。为了进一步证明这一点，让我们看看组件在与CSSGrid一起使用时的行为有何不同。在CSSGrid中，我们可以通过使用auto-fit关键字告诉浏览器我们希望在列数低于预期时扩展列（您可以在此处阅读更多相关信息）。此功能非常强大，因为它可以帮助我们呈现同一背景的不同变体。让组件对其父宽度做出反应非常有用。如您所见，我们重新访问了桌面大小的页面，其中有不同的部分，每个部分都有不同数量的列。在设计响应式组件时避免复杂性很重要，要记住组件的内部部件就像乐高游戏。我们可以根据当前的变化对它们进行排序，但是一切都有一个限制。有时，前端开发人员最好开发一个全新的组件，而不是使用容器查询创建变体。考虑以下。它有以下内容：头像名称按钮键/值对如果内部部件保持不变，或者至少不包含新部件，我们可以更改组件并有多个变体，如下所示。CSS容器查询用例让我们探讨一些可以使用CSS容器查询实现的用例。聊天列表我在FacebookMessenger上看到过这种模式。聊天列表根据视口宽度而变化。我们可以使用CSS容器查询来实现它。当有足够的空间时，列表会展开以显示每个用户的姓名。聊天列表的父元素可以是可动态调整大小的元素（例如：使用CSS视口单位或CSS比较函数）。//HTML

主要内容