免费在线CSS容器查询生成器，可视化构建@container查询规则，实时预览容器响应式效果，支持容器类型、条件组合，无需注册。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用⚙️ 容器配置
容器名称
容器类型
📐 查询条件
条件组合
🎨 容器内样式
🔒所有CSS生成在浏览器本地完成
常见问题
什么是CSS容器查询？
CSS容器查询（@container）允许根据父容器的尺寸而非视口大小来应用样式，实现组件级别的响应式设计。
容器查询和媒体查询有什么区别？
媒体查询基于视口尺寸，容器查询基于父容器尺寸。容器查询让组件能根据自身所在空间自适应。
支持哪些容器类型？
支持inline-size（默认，基于宽度）、size（基于宽高）和normal（不建立查询容器）三种容器类型。
浏览器兼容性如何？
Chrome 105+、Firefox 110+、Safari 16+已支持容器查询。
数据会上传服务器吗？
不会。所有CSS容器查询生成在浏览器本地完成，数据绝不上传服务器。
能组合多个条件吗？
可以。支持and/or组合条件，如@container (min-width: 400px) and (max-width: 800px)。