如何理解CSS font-size的clamp()函数第二个参数的计算逻辑

clamp 的第二个参数是线性动态计算表达式，作用是在你设定的最小、最大视口阈值区间内，让属性值随视口宽度平滑线性变化。以下是你给出的示例的完整计算过程，默认前提为浏览器根字号为标准16px，即1rem = 16px：

• 第一步：计算两端差值
  字号变化总差值：最大字号3rem - 最小字号1.5rem = 1.5rem = 24px
  视口阈值差值：最大触发阈值1000px - 最小触发阈值700px = 300px
• 第二步：计算vw系数
  线性变化斜率 = 字号总差值 / 视口总差值 = 24px / 300px = 0.08 = 8%，对应表达式中的8vw（1vw等价于视口宽度的1%）
• 第三步：计算常数截距项
  代入最小视口阈值计算需要补充的常数：
  视口为700px时，8vw的计算结果为 700px * 8% = 56px
  此时要求最终字号等于最小值1.5rem（即24px），因此常数项 = 24px - 56px = -32px = -2rem
• 第四步：拼接得到最终表达式
  组合vw系数和常数项，就得到第二个参数的结果：8vw - 2rem

效果验证：
视口为1000px时，8vw - 2rem = 80px - 32px = 48px = 3rem，完全匹配最大字号要求
视口小于700px时，8vw - 2rem的计算结果小于1.5rem，clamp会自动取第一个参数的最小值1.5rem
视口大于1000px时，8vw - 2rem的计算结果大于3rem，clamp会自动取第三个参数的最大值3rem

完全符合你设定的参数规则。

内容的提问来源于stack exchange，提问作者StackOverflowNewbie