CSS 容器查询生成器

在线可视化构建 CSS @container 容器查询规则,设置容器名称、查询类型与宽高尺寸条件,一键生成可直接使用的代码片段;浏览器本地运行,免费无需安装。

容器设置
查询条件
特性 比较
容器内 CSS 规则
输出选项
生成代码
/* 配置左侧参数后点击「生成代码」*/
实时预览(拖动滑块改变容器宽度)
400px
预览元素

调整容器宽度以查看条件是否触发