如何用CSS clamp规则生成margin的%/vw动态响应值？

直接给你正确的CSS代码：

margin: clamp(1%, calc(1% + ((100vw - 450px) * 9%) / 450px), 10%);

为什么你之前的写法不对？ #

1. 单位混乱：你推导的方程里，viewportWidth/50 -8中的8是百分比值，不是vw单位，但你写成了8vw，导致计算出负数结果。
2. 无效运算：100vw / 50px属于不同单位的除法，CSS不允许这种跨单位除法操作，所以被判定为无效属性值。

验证效果： #

• 视口宽度≤450px时，100vw -450px≤0，calc结果为1%，触发clamp下限，margin=1%；
• 视口宽度≥900px时，(100vw -450px)/450px=1，calc结果为1%+9%=10%，触发clamp上限，margin=10%；
• 视口宽度为675px时，(675-450)/450=0.5，calc结果为1%+4.5%=5.5%，完全符合你要的线性插值效果。

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