SuperAPI AI 工具集

responsive-block-patterns

通用与其它

查看项目

更新于 10-16 08:04

技能介绍

用途:为可复用组件提供随断点变化的响应式设计智能,核心判断是空间不足时组件做四件事之一——重排、堆叠、转换为另一组件、或消失。

主要能力:提供断点常量(--bp-sm 640px、--bp-md 768px、--bp-lg 1024px、--bp-xl 1280px、--bp-2xl 1536px);clamp() 主公式 clamp(min, preferred + relative, max),preferred 用 rem、relative 用 vw;容器查询语法与单位;流式字体与间距标尺;60+ 组件的断点转换目录;布局配方如列数递进、折叠侧边栏、圣杯布局;组件级响应式代码(排版、图片、表格、导航)。

使用方式:按需查阅参考文件——断点转换看 references/breakpoint-transformation-catalog.md;容器查询看 references/container-query-patterns.md;流式缩放看 references/fluid-scaling-system.md;组件响应式代码看 references/responsive-component-patterns.md;整体布局配方看 references/responsive-layout-recipes.md;其余看 references/responsive-supplementary.md。每个文件包含转换类型、触发断点或容器尺寸及原因、完整 CSS(容器查询优先)、最小尺寸下有意舍弃的内容、触控目标与拇指可达性影响。

适用场景:响应式卡片、导航变形、表格转卡片列表、流式排版与间距、响应式表格图片导航、多列布局与侧边栏折叠等。

限制:触控目标不随断点缩小,44px 在所有断点保持 44px;流式优先于阶梯式,断点只处理真正的形态转换;应设计转换过程而非仅两端状态;具体平台版本约定、依赖环境与安装方式资料未提供。