CSS 容器查询生成器
在线可视化构建 CSS @container 容器查询规则，设置容器名称、查询类型与宽高尺寸条件，一键生成可直接使用的代码片段；浏览器本地运行，免费无需安装。
容器设置
查询条件
特性 比较 值
容器内 CSS 规则
输出选项
生成代码
/* 配置左侧参数后点击「生成代码」*/
实时预览（拖动滑块改变容器宽度）
400px
预览元素
调整容器宽度以查看条件是否触发
在线可视化构建 CSS @container 容器查询规则，设置容器名称、查询类型与宽高尺寸条件，一键生成可直接使用的代码片段；浏览器本地运行，免费无需安装。
/* 配置左侧参数后点击「生成代码」*/
调整容器宽度以查看条件是否触发
先填写或调整「容器名称（可选）」、「container-type」、「容器选择器」、「目标选择器」、「CSS 声明（每行一条）」、「容器宽度」，再使用「生成代码」、「只复制查询」完成操作。可先用「容器选择器」中的示例 「.card-wrapper」熟悉输入格式，再替换成自己的数据。
本页提供「inline-size（宽度查询，最常用）」、「size（宽高均可查询）」、「normal（仅样式查询）」选项。先按实际输入和目标选择「container-type」，再执行操作；比较两次结果时，保持其他参数一致，避免把不同模式的结果混在一起。
先用最小示例验证，再将结果放回实际开发环境检查。语言版本、运行环境、编码和配置项可能与浏览器中的处理规则不同。
本页的主要处理逻辑在浏览器内执行。页面加载资源、打开外部链接，以及带外部地址的内容预览仍可能产生网络请求；“本地处理”并不表示整个网页完全没有网络活动。
先检查「容器名称（可选）」、「container-type」、「容器选择器」是否完整，以及格式、单位和当前选项是否匹配。重新执行「生成代码」，查看页面的结果或错误提示；可先用少量数据定位问题。
CSS 媒体查询生成器 · 流体排版 / CSS clamp 生成器 · CSS 格式化 · Box Shadow 生成器 · 全部开发工具