免费在线CSS容器查询生成器，可视化构建@container查询规则，实时预览容器响应式效果，支持容器类型、条件组合，无需注册。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用媒体查询基于视口尺寸，容器查询基于父容器尺寸。容器查询让组件能根据自身所在空间自适应。
支持inline-size（默认，基于宽度）、size（基于宽高）和normal（不建立查询容器）三种容器类型。
Chrome 105+、Firefox 110+、Safari 16+已支持容器查询。
不会。所有CSS容器查询生成在浏览器本地完成，数据绝不上传服务器。
可以。支持and/or组合条件，如@container (min-width: 400px) and (max-width: 800px)。
CSS容器查询生成器是一款纯前端在线工具，用于可视化构建@container查询规则。通过图形界面配置容器名称、类型、查询条件和内部样式，工具自动生成标准CSS容器查询代码，并提供实时预览功能，拖动滑块即可看到不同容器宽度下的样式变化。支持多条件AND/OR组合，覆盖min-width、max-width、aspect-ratio、orientation等查询特性。所有处理在浏览器本地完成。
步骤1：设置容器名称和类型（inline-size/size）。
步骤2：添加查询条件（如min-width: 400px）。
步骤3：输入容器内要应用的CSS样式。
步骤4：点击"生成CSS"或Ctrl+Enter，查看代码和预览效果。
让卡片、侧边栏等组件根据自身容器空间自适应，而非依赖视口宽度。
为设计系统中的组件定义容器查询规则，确保组件在任何布局中都能正确展示。
通过实时预览快速调试容器查询断点，找到最佳样式切换点。
在支持容器查询的浏览器中使用组件级响应式，不支持的浏览器回退到默认样式。
CSS容器查询（Container Queries）是CSS的新特性，通过@container规则实现。使用前需在父元素声明container-type: inline-size（或size），可选声明container-name用于命名容器。查询语法类似媒体查询，但基于容器尺寸而非视口。容器查询的核心优势是组件级响应式：同一个组件放在宽容器和窄容器中可以自动切换布局，无需修改组件代码。Chrome 105+、Safari 16+、Firefox 110+已支持。
CSS容器查询（@container）允许根据父容器的尺寸而非视口大小来应用样式，实现组件级别的响应式设计。