容器查询生成
可视化生成 CSS Container Query 代码：选择容器类型（inline-size / size / scroll-state）、命名容器、配置 min-width / max-width / 范围断点与内部样式，输出 container-type 声明与 @container 规则，并给出降级写法。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
预设
容器设置
container-type 定义这个元素能被查询的维度：inline-size 只查宽度，size 查宽高，scroll-state 查滚动状态
断点与内部样式
每条断点生成一个 @container 规则；声明每行一条，重复属性会报错
实时预览
预览按当前容器宽度模拟命中哪些断点，并按层叠顺序合并声明（scroll-state 断点不参与模拟）
命中的断点：1
生成的 CSS
.card {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 480px) {
.card__title {
font-size: 20px;
}
}
@container card (min-width: 768px) {
.card__title {
font-size: 24px;
line-height: 1.2;
}
}降级写法
不支持 container-type 的浏览器用 @supports not (...) 回退到基准样式（取第一个断点的声明）
@supports not (container-type: inline-size) {
.card__title {
font-size: 20px;
}
}这个工具能做什么
- 做真正响应式的组件：卡片、导航、侧边栏按自己容器的宽度调整样式，而不是跟着整个视口走，同一组件放进窄栏和宽栏都能自适应。
- 写 @container 规则时不用记语法：选好容器类型、命名和断点，直接复制 container-type 声明与 @container 块。
- 给组件库补容器查询支持：把现有的媒体查询断点换成容器断点，用预览按宽度滑块确认命中效果。
- 做吸顶导航时用 scroll-state 查询：容器吸住顶部后自动加阴影或边框，不必再写 JS 滚动监听。
示例
输入
容器 .card 命名 card、container-type 为 inline-size，内部元素 .card__title；断点 1：(min-width: 480px) → font-size: 20px；断点 2：(min-width: 768px) → font-size: 24px; line-height: 1.2
输出
.card {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 480px) {
.card__title {
font-size: 20px;
}
}
@container card (min-width: 768px) {
.card__title {
font-size: 24px;
line-height: 1.2;
}
}降级块取第一个断点的声明：@supports not (container-type: inline-size) { .card__title { font-size: 20px; } }。
常见问题
容器查询和媒体查询有什么区别？
媒体查询看的是视口，容器查询看的是最近的容器祖先的尺寸。同一个卡片组件放进 300px 的侧栏和 800px 的主栏，媒体查询只能给出一种样式，容器查询能让它各自变形，这是组件级响应的关键。
container-type 该选 inline-size 还是 size？
inline-size 只允许查询行内轴（横向书写时就是宽度），对布局影响最小，是绝大多数场景的选择。size 允许查询宽高，但会让元素在两个轴上都应用尺寸包含，高度不再由内容撑开，除非明确需要按高度查询，否则不要用。
为什么查询里的元素没有反应？
最常见的原因有三个：容器上没有写 container-type；@container 的名字和 container-name 对不上（或者容器有名字却没在查询里写）；以及被查询的元素不是容器的后代。另外容器查询不能查询容器自身，只能查询它的后代。
scroll-state 查询需要什么条件？
容器要声明 container-type: scroll-state，查询写成 @container scroll-state(stuck: top) 这种形式，用来判断元素是否吸在某个边缘（stuck）、是否可滚动（scrollable）或吸附在哪条轴上（snapped）。它和尺寸查询不能混用，本工具会在类型不匹配时报错。
旧浏览器怎么办？
把基准样式写在查询之外（工具会生成 @supports not (container-type: inline-size) 的降级块），这样不支持容器查询的浏览器至少能拿到默认样式，而不是完全没有样式。容器查询目前在所有现代浏览器都已支持。
关键词：container querycontainer-typeat-containercss containmentresponsive componentsscroll-state容器查询响应式组件container query 生成断点前端布局