📦
容器查询生成器
生成 CSS 容器查询(@container)代码，让组件按父容器宽度而非视口自适应。
本地处理 · 不上传
加载工具中…
相关：container query · 容器查询 · 响应式 · 组件 · css
容器查询生成器生成基于父容器宽度而非视口宽度的响应式代码，让同一个组件放进侧边栏或主栏都能自适应。它补上了媒体查询做不到的那一块：组件不必再猜自己被放在了页面的什么位置。
使用步骤
- 设置容器名称与类型
- 定义各尺寸区间的样式
- 查看生成的代码
- 复制使用
使用场景
- 编写在任意位置都能自适应的组件
- 让卡片在窄栏变纵向、宽栏变横向
- 构建组件库时摆脱页面上下文依赖
- 减少针对特定页面写的适配代码
小贴士
- 使用前必须在父元素上声明 `container-type: inline-size`，否则查询没有参照对象，规则完全不生效。
- 容器查询解决的是媒体查询解决不了的问题：同一组件在页面不同位置需要不同布局，而视口宽度对此一无所知。
- 容器不能查询自身——设了 container-type 的元素只能被它的后代查询，规则要写在子元素上。
常见问题
和媒体查询有什么区别？
媒体查询看视口宽度，容器查询看父容器宽度。一个卡片组件放在 300px 的侧边栏里，媒体查询只知道屏幕有 1920px，容器查询才知道它实际只有 300px。
为什么完全不生效？
最常见原因是忘了在父元素声明 container-type。另一个常见错误是把查询规则写在了容器自身上，而它只能作用于容器的后代元素。
兼容性怎么样？
主流浏览器较新版本已全面支持。需要兼容旧版本时，可以用 @supports 做特性检测，为不支持的环境保留媒体查询方案。
容器查询生成器是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用容器查询生成器，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。