SuperAPI AI 工具集

utopia-container-queries

设计与创作

查看项目

更新于 10-16 06:45

技能介绍

用途:该项目用于为使用 cqi(container query inline)单位的流体排版与间距令牌提供容器上下文。若不建立容器上下文,cqi 部分会计算为 0,导致数值停留在最小值,无法实现流式缩放。

主要能力与现状:typography.css 与 space.css 中已有 cqi 单位的 clamp 令牌,但当前 CSS 文件中没有任何 container-type 声明,也没有 @container 查询、命名容器,因此缩放尚未生效。grid.css 不使用 cqi,而是 vw 回退。

必要用法:推荐在 html 或 body 上设置 container-type: inline-size 作为全局容器上下文;也可对组件容器单独设置,如 .card-container { container-type: inline-size; },或使用 container: card / inline-size; 为容器命名。设置后可使用 @container (inline-size > 400px) 等查询进行组件级响应式布局。可用的容器单位包括 cqi、cqb、cqw、cqh、cqmin、cqmax,其中 cqi 表示容器内联尺寸(LTR 下为宽度)的 1%。

适用场景:需要基于容器宽度而非视口宽度进行流体排版、间距和组件响应式的项目。推荐在 css/styles/index.css 中加入根容器设置,css/styles/layouts.css 当前为空,可用于容器工具类。

限制:该资料未提供任何 container-type 声明、@container 查询或命名容器的现有实现;需按上述步骤手动补充。资料未提供安装命令、代码包、收费或平台信息。