LocalTools离线浏览器工具合集

分类: 开发工具

流体间距比例生成器

站方自主规划没找到想要的工具？

生成一整套基于 clamp() 的间距令牌

给出窄视口和宽视口下的基础间距大小，以及一个缩放比例，即可得到一整套 --space-* 自定义属性，每一个都是各自独立、能在两者之间平滑缩放的 clamp()，可直接粘贴进 :root 中使用。

令牌输出
--space-3xsclamp(0.0988rem, 0.0601rem + 0.1718vw, 0.1975rem)
--space-2xsclamp(0.1481rem, 0.0902rem + 0.2576vw, 0.2963rem)
--space-xsclamp(0.2222rem, 0.1353rem + 0.3865vw, 0.4444rem)
--space-smclamp(0.3333rem, 0.2029rem + 0.5797vw, 0.6667rem)
--space-mdclamp(0.5rem, 0.3043rem + 0.8696vw, 1rem)
--space-lgclamp(0.75rem, 0.4565rem + 1.3043vw, 1.5rem)
--space-xlclamp(1.125rem, 0.6848rem + 1.9565vw, 2.25rem)
--space-2xlclamp(1.6875rem, 1.0272rem + 2.9348vw, 3.375rem)
--space-3xlclamp(2.5313rem, 1.5408rem + 4.4022vw, 5.0625rem)
输出
:root {
  --space-3xs: clamp(0.0988rem, 0.0601rem + 0.1718vw, 0.1975rem);
  --space-2xs: clamp(0.1481rem, 0.0902rem + 0.2576vw, 0.2963rem);
  --space-xs: clamp(0.2222rem, 0.1353rem + 0.3865vw, 0.4444rem);
  --space-sm: clamp(0.3333rem, 0.2029rem + 0.5797vw, 0.6667rem);
  --space-md: clamp(0.5rem, 0.3043rem + 0.8696vw, 1rem);
  --space-lg: clamp(0.75rem, 0.4565rem + 1.3043vw, 1.5rem);
  --space-xl: clamp(1.125rem, 0.6848rem + 1.9565vw, 2.25rem);
  --space-2xl: clamp(1.6875rem, 1.0272rem + 2.9348vw, 3.375rem);
  --space-3xl: clamp(2.5313rem, 1.5408rem + 4.4022vw, 5.0625rem);
}

每个令牌都是各自独立的 clamp()，因此每一级都会在两个视口宽度之间平滑缩放。

本页的所有处理都在浏览器中完成，不会上传任何内容。

这个工具能做什么

单独一个流体 clamp() 对单个数值很有用，但大多数布局需要的是一整套一致的间距等级，手写每一个的 clamp() 只会把同样的算术错误在每个令牌上重复一遍。本工具只需要视口两端各一个基础大小和一个比例，就会像生成字号比例那样，围绕一个中间等级生成一整套对称的令牌，让整套间距在视口变化时始终保持成比例的一致性。

使用方法

  1. 设置窄视口和宽视口下的基础间距大小。
  2. 设置各级之间的缩放比例。
  3. 复制生成的包含 --space-* 自定义属性的 :root 代码块。

隐私说明

本工具完全在你的浏览器中运行。输入的内容不会被上传、保存或分享，关闭标签页即随之消失。

常见问题

为什么是九个等级？
九个等级在中间值上下各提供四级，足以覆盖从紧凑的行内间隙到较大的区块间距等大多数布局场景，不必事后再临时发明新的名称。
会向服务器发送内容吗？
不会。每一个 clamp() 都是在页面内根据你输入的数字计算出来的，这也是表格和 CSS 输出能即时更新的原因。
这个工具能和 CSS clamp 生成器搭配使用吗？
可以。本工具用一组输入生成一整套比例；CSS clamp 生成器则用于像标题字号这样的单个数值，两者背后是同一套运算逻辑。

返回全部工具