CSS容器查询生成器

它的功能

CSS容器查询生成器构建可以直接粘贴的 @container 规则——这个 CSS 允许组件根据其自身 容器 的大小（或自定义属性）而不是浏览器视口来重新设置自身的样式。选择一个容器类型，设置断点或自定义属性条件，然后输入应该在条件匹配时应用的样式。当您更改任何选项时，实时预览会更新：拖动示例容器的调整大小手柄以进行 size/inline-size 查询，或切换复选框以进行 style 查询。

什么是容器查询

媒体查询只能看到视口。容器查询让元素能够响应其最近的 containment 上下文 的大小——所以同一个卡片组件可以在宽边栏中以一种方式布局，在被挤压进窄列中时以另一种方式布局，与整体屏幕大小无关：

.container {
  container-type: inline-size;
  container-name: sidebar;
}

@container sidebar (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

container-type 选择要进行 containment 的元素（inline-size 仅用于宽度，size 用于宽度和高度）；container-name 是可选的，允许您按名称指定此特定容器，而不是最近的设置了 container-type 的祖先。

三种容器类型

• Inline-size — 最常见的选择。仅在内联轴上建立 containment（水平书写模式中的宽度），因此可以通过 min-width/max-width 条件查询它。
• Size — 在两个轴上都建立 containment，因此也可以使用基于高度的条件。需要容器具有明确的或受限的高度；自动高度的容器无法进行大小 containment。
• Style — 查询自定义属性的值而不是尺寸，通过 style(--prop: value)。不需要 container-type: size 或 inline-size——任何容器都建立样式查询上下文。对于应该根据树中上方设置的主题或状态变量重新设置样式的组件很有用。

使用方法

1. 可选地为容器命名——如果是匹配最近的设置了 containment 的祖先的匿名容器，则留空。
2. 选择 容器类型。
3. 对于 Inline-size/Size，选择一个条件（min-width、max-width 或 min+max 范围）并设置像素单位的断点。对于 Style，设置自定义属性名称和应该匹配的值。
4. 输入条件匹配时应用的样式——它们被包装在 @container 规则内的 .card 选择器中，与预览相匹配。需要帮助构建 flex 或 grid 规则本身？尝试 CSS 弹性盒子生成器 或 CSS 网格生成器 并将结果粘贴到这里。
5. 复制 CSS，如果要重复使用预览的结构，还可以复制演示标记，并调整 .card 选择器以匹配您自己的组件。

常见问题

为什么我的 @container 规则需要一个选择器，而 @media 不需要？ 媒体查询只涉及视口，所以它的正文可以包含普通的声明。容器查询涉及元素自身的大小——而该元素可能不具有您正在切换的属性——所以浏览器需要块内的选择器来知道要重新设置什么样式。

为什么 size containment 在我的元素上不起作用？ container-type: size 需要元素具有明确的高度（或 aspect-ratio）。没有它，浏览器无法建立大小 containment，查询将永不匹配——如果高度不固定，请切换到 inline-size。

我可以组合大小条件和样式条件吗？ 不能在一个 @container 规则中——选择此工具条件所针对的任何一个，然后如果您需要两者，手动嵌套第二个 @container 块。

此工具是否存储或上传任何内容？ 否。包括实时预览在内的一切都在您的浏览器中本地运行——您输入的任何内容都不会离开您的设备。

如果我需要基于视口的断点呢？ 使用 CSS 媒体查询生成器——同样的思路，但键控到浏览器视口而不是元素的容器。