CSS @container 容器查询生成器
可视化生成 CSS @container 容器查询：完整支持容器声明（container-type、
container-name）与多条 @container 查询（min-width /
max-width 阈值 + 命中后样式）。拖拽预览容器右侧手柄即可调整宽度，
实时观察样式随容器尺寸变化的"组件级响应式"效果，一键复制 CSS 代码。
内置单断点窄宽、双断点窄中宽、卡片三栏自适应、字号自适应、紧凑/宽松切换等 8 组预设。
适用于卡片组件、面板布局、组件库响应式设计等现代前端开发场景。所有处理在浏览器本地完成。
容器声明（.container）
命名后可在 @container 规则中通过名称指定目标容器，避免冲突。
size：容器在宽高两个维度建立 containment，支持 width/height 查询inline-size：仅横向维度，性能最优，最常用normal：不建立 containment，无法被 @container 查询
@container 查询（1/6）
min-width: 480px编辑查询：查询 1
.container {
container-type: inline-size;
container-name: card;
}
/* 查询 1 */
@container card (min-width: 480px) {
.item {
background: #2563eb;
color: #ffffff;
padding: 20px;
border-radius: 10px;
font-size: 16px;
}
}当前共 1 个 @container 查询（其中 1 个启用）。 预览容器宽度 560px，命中 1 个查询：查询 1。
常见问题
什么是 CSS 容器查询？它与 @media 媒体查询有什么区别？
容器查询（Container Queries）是 CSS 在 2023 年正式落地的现代响应式特性，
允许组件根据其父容器（containment context）的尺寸应用不同样式，而非视口尺寸。
与 @media 媒体查询的核心区别：
@media：基于浏览器视口（viewport）查询。同一组件在不同位置（侧栏窄、主区宽）只能响应视口，无法真正"组件级响应式"。
@container：基于父容器尺寸查询。同一组件放在侧栏 200px 与主区 800px 时可自动应用不同样式，真正实现"组件即插即用"的响应式。
典型场景：一个卡片组件在窄容器中显示为竖向堆叠，在宽容器中显示为横向布局，与卡片在页面中的位置无关。本工具的可拖拽预览区直观展示这一效果。
container-type 的 size、inline-size、normal 有什么区别？应该选哪个？
container-type 声明元素为 containment context，决定可查询的维度：
size：在宽高两个维度建立 containment，可查询 width 与 height。但会同时影响元素尺寸计算（元素尺寸不再由内容撑开，需显式指定），可能引起布局副作用。
inline-size（推荐）：仅在横向（inline 方向）建立 containment，仅可查询 width（即 inline-size）。不影响元素高度计算，性能最优，覆盖 95% 实际场景。
normal：默认值，不建立 containment context，无法被 @container 查询。
选型建议：除非需要响应高度变化（如全屏 Hero 区按高度切换布局），优先使用 inline-size，避免 size 带来的布局复杂度。
container-name 是什么？什么时候需要命名容器？
container-name 为 containment context 命名，使 @container 查询可指定目标容器。
匿名容器（默认）：不指定 container-name，@container (min-width: 480px) 会匹配最近的祖先 containment context。简单场景足够，但多层嵌套时可能误匹配。
命名容器：声明 container-name: card 后，@container card (min-width: 480px) 仅匹配名为 card 的容器，避免命名冲突。
命名规则：必须是合法 CSS 标识符（字母/数字/连字符），不能以数字开头。本工具会自动过滤非法字符。
建议：组件库或复杂嵌套场景下显式命名容器，避免匿名容器的隐式匹配带来的维护困难。
@container 查询的语法是什么？min-width 和 max-width 如何组合？
@container 语法：
@container [name] (condition)
其中 name 可选（命名容器时使用），condition 是查询条件。
单条件：@container (min-width: 480px)，容器宽度 ≥ 480px 时命中。
多条件（且）：@container (min-width: 320px) and (max-width: 640px)，宽度在 320-640px 区间命中。
多条件（或）：@container (min-width: 800px) or (height > 600px)，任一条件满足即命中。
注意：与 @media 不同，@container 的 min-width / max-width 是容器自身尺寸而非视口尺寸。本工具的预览容器宽度可拖拽调整，实时反映查询命中情况。
容器查询的优先级如何确定？多条查询同时命中怎么办？
容器查询遵循 CSS 层叠规则：后定义的查询覆盖先定义的（同等特异性下）。
例如同时定义 @container (min-width: 320px) 与 @container (min-width: 640px)，
当容器宽度为 700px 时两条都命中，但后定义的（640px）样式会覆盖前者。
实战技巧：从小到大排列断点，让宽屏样式自然覆盖窄屏样式，符合"渐进增强"思想。
本工具的预设"渐变颜色（4 断点）"展示了这一规则——4 个查询从 240px 到 800px 递增，
拖拽预览容器从窄到宽，颜色依次切换为玫瑰→橙→青柠→青，直观体现优先级覆盖。
使用容器查询需要考虑浏览器兼容性吗？
容器查询于 2023 年 2 月在所有主流浏览器（Chrome 105+、Firefox 110+、Safari 16+）正式支持，2026 年已是成熟特性。
兼容性数据：
container-type / container-name：Chrome 105+、Firefox 110+、Safari 16+，全球浏览器支持率 > 95%
@container 规则：同上
style() 函数查询（基于自定义属性值）：Chrome 111+、Safari 17.4+，较新特性
对于需要兼容旧浏览器（如 IE、Chrome 100 以下）的项目，可使用 @supports 检测后降级为 @media。
本工具生成的代码仅使用稳定的容器查询语法，无需 polyfill 即可在 2026 年主流浏览器中运行。
容器查询对性能有什么影响？应该避免哪些用法？
容器查询本身性能开销极小，浏览器仅在容器尺寸变化时重新评估查询，不触发额外布局。
性能建议：
1. 优先使用 container-type: inline-size 而非 size——后者会同时影响宽高布局，可能触发更多重排。
2. 避免在大范围内嵌套多层 containment context，每层都会增加样式评估成本。
3. 命中样式中优先修改合成层属性（如 background、color、transform），避免触发重排。
4. 容器查询的命中样式会触发完整样式重计算，但仅在容器尺寸变化时发生，正常滚动不触发。
本工具的预览区使用了 inline-size 与轻量样式属性，性能表现优异，可作为生产实践参考。
数据会上传到服务器吗？
不会。本工具完全在浏览器内运行，所有容器声明、查询条件、样式调节与 CSS 生成由 JavaScript 在你本地执行， 不会发送任何配置或代码到服务器。全程零网络请求，可离线使用。