clamp()函数计算器

工具地址：https://10.1pxeye.com/tools/clamp-calculator/

工具演示：

范例演示：

下面的范例演示的是屏幕宽度在400px~800px时相关值（字号、边距）的线性变化。

body {
  padding: clamp(30px, 7.5vw, 60px) clamp(20px, 5vw, 40px);
  font-size: clamp(14px, 8px + 1.5vw, 20px);
}

h1 {
  font-size: clamp(22px, -4px + 6.5vw, 48px);
}

blockquote {
  font-size: clamp(12px, 10px + 0.5vw, 14px);
}

可通过缩放窗口查看页面中字号和边距的变化。
https://10.1pxeye.com/tools/clamp-calculator/sample.html

clamp()函数介绍：

clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。 clamp() 被用在 <length>、<frequency>、<angle>、<time>、<percentage>、<number>、<integer> 中都是被允许的。

更多内容请参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/clamp