用途:为响应式设计生成一致的断点令牌,统一项目中的媒体查询,并支持容器查询断点,便于从任意断点迁移到令牌化管理。
主要能力:可选择移动优先(min-width)或桌面优先(max-width);使用预设(Tailwind 640/768/1024/1280/1536、Bootstrap 576/768/992/1200/1400、Material 600/905/1240/1440、Minimal 640/1024/1440)或自定义数值;设定断点数量(通常 4-6 个);可选是否包含容器查询令牌;输出 CSS 自定义属性与媒体查询、Tailwind 配置、JSON 令牌或 SCSS 变量与 mixin。
使用方式:按流程依次确认设计取向、预设或自定义、断点数量、是否含容器查询、输出格式,然后生成断点刻度与媒体查询辅助代码。示例输出包括 :root 中的 --breakpoint-* 变量、Tailwind 的 screens 配置、JSON 的 breakpoint 令牌,以及 SCSS 的 $breakpoint-* 变量与 sm-up 等 mixin。容器查询部分提供 --container-* 变量、container-type/container-name 定义及 @container 查询示例。
适用场景:搭建响应式设计令牌、标准化媒体查询、创建容器查询断点、迁移到令牌化断点。
限制:资料未提供具体安装命令、收费方式、平台支持或效果保证;断点数值与预设仅为示例,实际使用需按项目内容调整。