你可能不知道的“CSS容器查询”的背景。今天PM来找我问：老大，有用户反映他们的屏幕太小，需要滑动，操作不方便。我们的系统可以改成自适应布局吗？我惊呆了：woc，有必要把一个迭代了一年多的固定设计的产品改成自适应布局吗？这真的很可怕。然后又查了一些自适应布局的资料，想找到一个修改代价最小的方案。在这个过程中，我发现了一个比较有意思的东西：CSS容器查询。对此，我做了简单的整理和总结，在此分享给大家，希望对大家有所启发。Text什么是CSS容器查询容器查询允许开发人员根据容器元素的大小设置元素的样式。它类似于@media查询，只是它是根据容器的大小而不是视口的大小来判断的。当我们创建响应式设计时，我们经常使用媒体查询来根据视口的大小更改文档的布局。但是，许多设计都有通用组件，这些组件会根据容器的可用宽度更改布局。这可能并不总是与视口的大小有关，而是与组件在布局中的放置位置有关。例如，以下组件可能出现在网站布局的窄列或宽列中。如果有空间，它将显示为两列，否则我们希望它们堆叠显示。上图中左右两个组件是同一个组件，它们的功能完全一样，只是为了展示不同的布局。现在，我们可以通过某种方式识别组件，例如通过添加类或使用其他选择器来定位元素，这些选择器会查看其在文档结构中的位置。但是，这并不完全符合媒体查询在整体布局中的作用。媒体查询允许我们根据视口的边界调整元素的大小。当我们添加一个类或目标元素时，我们决定当对象在侧边栏时，它必须使用堆叠布局。然而，就可用空间而言，很可能在大屏幕上，侧边栏中的对象将有足够的空间以并排布局显示。容器查询将解决这种情况。除了查看视口的大小，我们还可以查看容器的大小，并根据容器内的空间进行布局调整。CSS容器查询建议容器查询，将成为css容器规范的一部分，并为contain属性添加新的值。contain属性最初是为性能优化而设计的。它为Web开发人员提供了一种方法来隔离DOM的各个部分，并向浏览器声明这些部分独立于文档的其余部分。使用包含：大小；意味着浏览器知道区域在两个维度上的大小。知道容器有多大，正是我们进行容器查询所需要的。然而，通常我们并不总是知道这两个维度有多大。当我们使用媒体查询时，大多数时候我们指定可用宽度（或内联大小）。我们将列定义为：该维度中空间的百分比或分数。因此，容器查询只允许通过在一个维度上指示大小来扩展包含属性，这被描述为单轴包含。下面的CSS会创建一个容器，它只包含行内轴上的容器，内容可以在块轴上增长到所需的大小：.sidebar{contain:layoutinline-size;}声明contain属性并放置布局size值被叠加，浏览器会在该元素上创建一个包含上下文。声明这个属性意味着浏览器知道：我以后可能要查询这个容器。然后，可以编写一个查询来查找这个包含上下文而不是视口大小来为组件做出布局决策。使用@container创建容器。这将查询最近的包含上下文。要使卡片仅在侧边栏宽度大于700px时显示为两列，我们使用以下CSS：@container(min-width:700px){.card{display:grid;网格模板列：2fr1fr；}}如果布局的其他区域也是containment，那么我们可以在那些区域放置组件，它会自动响应到相关容器。这使得我们可以在模式库中创建的各种组件真正可重用，而无需了解它们所在的上下文。其实可以说的很多，以上只是一些基本的概念。此外，上面显示的基本功能已经可以在ChromeCanary中进行测试。下载Canary，然后转到chrome://flags，搜索ContainerQueries并启用该标志。在线演示demo合集本文演示的demo在线链接：https://codepen.io/rachelandr...以及容器查询demo大合集：https://codepen.io/collection...兼容性容器查询目前还没有浏览器支持。容器查询的进展Blink组件https://bugs.chromium.org/p/c...提议（提案阶段）跟踪错误：https://bugs.chromium.org/p/c...共识和标准Chrome当功能在浏览器中可用时，不保证此处列出的值是最新的。Firefox:NosignalEdge:NosignalSafari:NosignalWebDevelopers:Nosignals结论CSS容器查询为自适应布局解决方案提供了一个新思路。但目前还处于提案阶段，有兴趣的可以继续关注。好了，本文就这些了，谢谢。相关资料https://developer.mozilla.org...https://developer.mozilla.org...https://caniuse.com/?search=%...https://www.chromestatus.com/...https://bugs.chromium.org/p/c...https://morioh.com/p/8b1afe84...最后，如果觉得内容有帮助，可以关注我的公众号，掌握最新动态，一起学习！
