Tool Hub

CSS clamp() 计算器

最小/最大字体·视口 → 响应式 clamp() 公式

Preview viewport: 800px

The quick brown fox jumps over the lazy dog.

24.00px @ 800px

CSS
font-size: clamp(1.000rem, 1.6667vw + 0.6667rem, 2.000rem);

使用方法

  1. 输入
  2. 输入
  3. Drag the preview slider to simulate how the font scales at different viewport widths and read the live pixel value.
  4. Copy the generated clamp() expression and paste it into your CSS.

示例

  • Min font 16px, max font 32px, min viewport 320px, max viewport 1280px produces clamp(16px, 1.667vw + 10.667px, 32px).
  • At a 800px preview viewport the live display shows approximately 23px, confirming smooth scaling between the two extremes.

生产环境使用前请验证输出。无担保 — 参见 条款.