CSS 容器查询生成器
CSS 容器查询生成器帮助落地 container-type 与 @container 规则：先指定某元素为查询容器，再按其宽度或高度断点写子元素的适配样式，实现组件随自身容器而非视口变化的自适应，比媒体查询更适合可复用卡片。
永久免费本地计算 · 零上传
🔒 全程在浏览器内计算，输入内容不会离开您的设备。
怎么用
- 给容器设 container-type 与命名
- 填写基于容器的断点条件
- 编写容器内子元素样式
- 生成 container 查询代码
典型场景
同一卡片放进窄侧栏与宽区自动换排
组件在市场与详情页宽度不同下自适应
仪表盘模块随格子尺寸重排
常见问题
和媒体查询有何区别？
媒体查询看视口，容器查询看组件所在容器尺寸。
浏览器支持如何？
较新内核已支持，旧环境需回退或渐进增强。
容器必须命名吗？
命名便于多个容器分别定向查询，推荐显式指定。