⭐ 0
🔍
文字 图片 PDF 和文档 音频 音乐 电子电路 时间 公用事业 验证者 玄学 游戏

流体间距 Clamp() 发生器

根据两个视口宽度的最小和最大尺寸计算真实的流体 CSS lamp() 值，并逐步显示斜率和交叉点以及实时调整大小预览。

处理中... 0%

结果

CSS的clamp()对于间距的工作方式与对于字体大小的工作方式完全相同——该属性恰好是边距、填充或间隙而不是字体大小。此页面会在 320 像素到 1280 像素的视口中打开 8 像素到 32 像素范围的计算器，这是部分填充或卡片间隙的常见步骤，在手机上应该感觉紧，在桌面上感觉宽敞，而没有看到媒体查询。

底层数学并不关心数字代表什么：产生流体标题大小的相同斜率和 y 轴交点公式会产生流体间距值，因此下面的细分准确显示了 8px 和 32px 如何变成用于填充的复制就绪的夹紧（）线：夹紧（...）。

拖动视口宽度滑块以预览两个断点之间的任意宽度的间距感觉如何，调整最小值和最大值以获得更紧或更宽松的范围，并将完成的线直接复制到任何需要的间距属性中。

🛡️
在浏览器中执行

您的文件和输入永远不会离开此设备。处理完全离线运行。 100% 安全。

接受的格式和规则

  • 真正的流体排版数学：明确显示斜率、vw 系数和 y 轴交点，而不仅仅是最终的 lamp() 线。
  • 实时预览：拖动视口宽度滑块以观看示例文本的大小调整，就像调整实际浏览器窗口大小时一样。
  • 类型缩放模式：基本尺寸和从 1.125 到 1.5 的比率生成六个 Fluid Clamp() 步骤 - 小、基本、h4、h3、h2、h1 - 作为复制就绪的 CSS。

主要优点

✓ 在您键入时，clamp() 线、坡度和交叉点数字以及实时预览都会更新 — 无需按任何按钮。
✓ 视口宽度滑块驱动实时预览框，因此您可以看到最小和最大断点之间的精确流体缩放，而不仅仅是公式。
✓ 单独的类型比例模式将一个基本尺寸和比例转换为完整的 6 步流体标题比例，准备好作为 CSS 自定义属性块。

使用案例

  • • 将最小/最大字体大小和视口范围转换为真正的clamp()线——包括斜率、vw系数和交点——而不是从教程中目测。
  • • 在将其提交到样式表之前，拖动视口宽度滑块可以预览流体标题或正文大小的调整，就像调整实际浏览器窗口大小时一样。
  • • 从一个基本尺寸和比例生成完整的 6 步流体类型比例（小到 h1），复制为 CSS 自定义属性的可直接粘贴块。
  • • 为间距（边距、填充、间隙）而不是字体大小构建一个流畅的lamp()——相同的斜率/交点公式适用于任何CSS属性。