如何实现全屏时padding取最大值，浏览器缩小时逐步缩小至最小值？

你的问题出在calc( value - value )这部分——不管value是什么，这个计算结果都是固定的0，相当于你写了padding-left: clamp(60px, 0, 186px)。clamp的规则是取三个值里的中间值，这里0比最小值60px还小，所以浏览器只会一直用60px，自然不会随宽度缩小变化。

给你两种正确的写法：

• 简单线性缩放：用vw单位作为中间值

  padding-left: clamp(60px, 8vw, 186px);
  

  逻辑：当视窗宽度小于750px（60÷0.08）时，取最小的60px；大于2325px（186÷0.08）时，取最大的186px；中间宽度区间里，padding会按视窗宽度的8%动态计算，随宽度缩放。

• 精准区间过渡：用calc结合vw和固定值，自定义缩放的宽度范围

  padding-left: clamp(60px, calc(60px + (186 - 60) * ((100vw - 768px) / (1920 - 768))), 186px);
  

  逻辑：设定只有当视窗宽度在768px到1920px之间时，padding才会从60px线性过渡到186px；小于768px用60px，大于1920px用186px。

写完代码后，直接在浏览器开发者工具里拖曳视窗宽度，查看元素的padding-left数值变化，就能验证效果了。

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