容器查询助手
选择父级类名、容器名称、阈值和固定布局预设,然后复制配对 CSS。
123456
使用步骤
如何使用
- 输入有效的 ASCII CSS 标识符并选择阈值。
- 选择子布局的列数和间距。
- 查看本地调整大小预览并复制 CSS。
配对 CSS 合同
助手会在父级添加 container-type: inline-size,并为子级类名生成带名称的 @container 规则。不接受任意 CSS 代码体。
本地预览边界
可将示例容器从 100 调整到 1200px。若浏览器不支持 CSS 容器查询,预览会明确显示。
常见问题
你可能还想知道
父级声明有什么作用?
它会将父级设为 inline-size 容器查询容器。
可以粘贴自己的 CSS 吗?
不可以。助手使用固定且安全的布局预设,不接受任意 CSS 输入。