CSS 容器查询入门——Bryntum

如果你用 CSS 设计了一个响应式网站，你可能用过 媒体查询 .媒体查询一直是响应式和适应性样式的首选和唯一解决方案，无论是用于检测用户偏好（如暗模式或减少运动）还是显示尺寸。也就是说，这并不意味着它们适用于所有场景。

如果不是让内容适应视口大小，而是希望它适应容器以创建具有灵活布局的组件，该怎么办？在这种情况下，媒体查询可能会受到很大限制。对于响应性，您需要对布局的每个部分进行单独的媒体查询，从而使代码更加繁琐。这就是容器查询的用武之地。

容器查询 是 CSS 即将推出的功能，目前是一个工作草案规范，仅来自浏览器的实验性支持（在撰写本文时）。它们旨在允许您基于父元素（容器）的大小而不是视口来创建响应式设计。也就是说，很容易看出为什么此功能会引起开发人员的注意。

在本文中，您将了解容器查询以及如何使用它们。

为什么需要容器查询

在基于组件的 UI 框架时代，开发人员通常希望他们的组件适应它们的父元素，也就是容器，而不是整个视口。这种方法提供了更大的灵活性，因为您可以重用相同的组件，同时将其调整到不同的位置，从而有效地将响应性与视口分离。例如，您可以有一个电子商务网站，其主页上有一个产品网格，而一个单一的 推荐产品 每个产品页面上的行，都在一个组件中。

容器查询正是针对这种用例的。通过使用它们，您可以轻松地为元素定义不同的样式，仅当其容器与提供的约束匹配时，类似于媒体查询允许您根据视口大小定义样式：

 。物品 {  
 显示：弯曲；  
 证明内容：中心；  
 对齐项目：居中；弹性方向：列；  
 } @container (min-width: 600px) { .item { flex-direction: row; } }

要了解容器查询有多么简单方便，请直接将它们与工作演示中的媒体查询进行比较。

容器查询入门

要开始使用容器查询，您需要确保您有一个 兼容的浏览器 并打开了所需的功能标志。

在本演示中，您将使用 CSS 网格布局，它通常与媒体查询结合使用以构建响应式视图。请记住，相同的技术可以用于其他布局，例如 弹性盒 .

首先，创建一个简单的 CSS 网格布局，借助媒体查询使列数适应视口大小：

 .grid-container {  
 显示：弯曲；  
 证明内容：中心；  
 对齐项目：弹性开始；  
 } 。网格 {  
 显示：网格；  
 间隙：1rem；  
 填充：1rem；  
 网格模板列：重复（1，minmax（0，1fr））；  
 } @media（最小宽度：560px）{  
 。网格 {  
 网格模板列：重复（2，minmax（0，1fr））；  
 }  
 } @media（最小宽度：832px）{  
 。网格 {  
 网格模板列：重复（3，minmax（0，1fr））；  
 }  
 } @media（最小宽度：1104px）{  
 。网格 {  
 网格模板列：重复（4，minmax（0，1fr））；  
 }  
 } @media（最小宽度：1376px）{  
 。网格 {  
 网格模板列：重复（5，minmax（0，1fr））；  
 }  
 } .item { 高度：16rem;宽度：16rem； /* ... */ }

使用这个 CSS，网格按预期工作，在五个断点中的每一个处适应视口。例如，这是最大视口尺寸的网格，宽度超过 1376 像素：

这是小于 1104 px 视口宽度的相同网格：

想象一下，这个网格代表产品、博客文章或照片的列表。即使在基本的网络应用程序中，您也需要以多种方式（网格、列表、轮播等）和在许多不同的地方（主视图、侧边栏、搜索框等）呈现此类内容。为此，您可能会将 UI 的这一部分提取到一个单独的组件中。然而，这就是事情开始变得复杂的地方。

如果您想在主网格视图旁边放置与列相同的组件怎么办？在这种情况下，按原样使用它会不太理想，导致整个 UI 被破坏：

唯一的解决方案是引入一个新的类名，如 .grid-vertical 强制单列布局：

 .grid-vertical { grid-template-columns: 重复(1, minmax(0, 1fr)); }

现在，这种方法并不理想。首先，它要求您添加一个 垂直的 prop，使组件更复杂且更不灵活，或者您必须创建一个完全独立的组件，在复制逻辑时仅在样式上有所不同。

最重要的是，此解决方案仅适用于特定视口大小（用不同颜色突出显示的单独布局）：

调整分钟视口的大小，UI 中断：

考虑到新的受限视口，需要更新网格布局的所有媒体查询。添加这样的代码很麻烦，而且，或者使组件变得不必要的复杂，或者需要一个完全独立的组件。更多的代码、降低的可读性和更具挑战性的维护都是您可以通过使用容器查询来避免的问题。

实现容器查询

要查看容器查询如何解决上述问题，您需要首先将布局包装在单独的容器中：

 .grid-container {  
 显示：弯曲；  
 证明内容：中心；  
 对齐项目：弹性开始；  
 容器类型：大小；  
 }

除了基本样式属性之外，您还必须包含一个 容器型 财产。它将元素定义为查询容器，允许其后代查询其属性。它可以有不同的值来指示什么 查询容器的类型 你要： 尺寸 , 内联大小 , 风格 ，等等。由于您将查询容器的尺寸，请使用 尺寸 .

或者，而不是 容器型 , 你可以使用 容器 属性，它是 容器型 和 容器名称 ：

 .grid-container { /* ... */ container: size my-container; }

这 容器名称 属性允许您为容器设置自定义名称以直接定位它，以防元素具有多个查询容器，如下所示：

 .grid-container { /* ... */ 容器名称：我的容器； }

准备好容器后，您需要做的就是更改 @媒体 查询到 @容器 ：

 @container（最小宽度：560px）{  
 。网格 {  
 网格模板列：重复（2，minmax（0，1fr））；  
 }  
 } @container（最小宽度：832px）{  
 。网格 {  
 网格模板列：重复（3，minmax（0，1fr））；  
 }  
 } @container（最小宽度：1104px）{  
 。网格 {  
 网格模板列：重复（4，minmax（0，1fr））；  
 }  
 } @container（最小宽度：1376px）{  
 .grid { 网格模板列：重复（5，minmax（0，1fr））； }  
 }

如果您指定了一个 容器名称 ( 例如 我的容器 )，您可以使用以下语法直接查询特定容器：

 @container 我的容器（最小宽度：560px）{  
 .grid { 网格模板列：重复（2，minmax（0，1fr））； }  
 }

现在，所有样式都将根据容器大小应用，这解决了之前媒体查询的所有问题：

由于使用了容器查询，您现在拥有一个可以轻松适应可用空间的组件。对您而言，这意味着更少的代码、更多的灵活性和更快的开发。

如果您有兼容的浏览器并打开了所需的功能标志，您可以预览工作演示 在这个 CodePen .

结论

当容器查询成为 CSS 规范的正式部分时，它们将极大地帮助开发人员创建更灵活和响应更迅速的组件。如您所见，容器查询易于使用，并且可以在使用 CSS 时提高可维护性和开发体验。您今天是否已经在使用容器查询？我们很想听听您对它如何改变您编写 Web 应用程序的方式的反馈。

本文是与 Arek Nawo 合作撰写的。

Bryntum 帮助世界按计划进行。我们的组件库为各种前端框架提供了一系列高质量、高级的 UI 控件。想了解更多？在以下位置尝试我们的调度和甘特图组件 bryntum.com .

最初发表于 https://www.bryntum.com 2022 年 9 月 23 日。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/38910/14592410