设计间距阶梯计算器
设置基础间距、比例、起始步数和 token 数量,为界面生成清晰的间距阶梯。
设置数值以生成间距阶梯。
间距 token
由 基础值 × 比例^步数 舍入得到。
使用步骤
如何使用
- 输入正数基础间距,选择 px 或 rem,并设置大于 1 的比例。
- 选择起始步数和 token 数量。
- 查看舍入后的数值,然后复制或下载 CSS 自定义属性。
几何 token 阶梯
每个原始 token = 基础值 × 比例^步数。起始步数为 0 时包含基础值,更高步数按比例增长。
透明的舍入规则
px 输出取最近整数,rem 输出保留最多四位小数。CSS 注释中会显示原始公式。
本地 CSS 输出
所有计算都在浏览器中完成,不上传设计数值,也不读取项目文件。
常见问题
你可能还想知道
为什么 px 会舍入?
整数像素更适合许多界面 token。预览和 CSS 注释会说明数值来自几何公式。
起始步数有什么作用?
步数 0 是基础值,从 1 开始会先得到基础值 × 比例,负数步数可以生成更小的值。
它会选择最佳设计系统吗?
不会。它只生成可预测的数学阶梯,比例、步数和命名仍由你决定。