CSS长度值能否实现二次变化效果？有无无需JavaScript的实现方案？

错误原因 #

你写的代码不合法的核心原因是CSS calc() 对单位运算有严格限制：两个带长度单位的值相乘会得到无效的面积单位，且CSS目前不支持对单位进行平方/开方后的自动消去运算，所以2.75vw * 2.75vw本身就属于非法运算，自然无法生效。

纯CSS实现方案 #

方案1：使用CSS幂函数pow()（现代浏览器兼容）

CSS Values and Units Level 4 标准已支持pow()幂运算函数，目前Chrome 112+、Firefox 112+、Safari 15.4+ 均已支持，可直接用该函数实现二次变化逻辑，合法写法如下：

padding: 2em clamp(1vw, 4em, calc(0.075625 * pow(100vw, 2) / 1px));

其中系数0.075625是根据你需要的二次曲线参数换算得到，可根据实际需求调整数值匹配你想要的下降斜率。

方案2：媒体查询分段模拟（全浏览器兼容）

如果需要兼容不支持CSS高级数学函数的旧版本浏览器，可以用多段媒体查询分段用线性值近似二次曲线效果，不需要引入JavaScript：

/* 可根据实际需要的曲线调整断点和对应vw参数 */
@media (min-width: 1200px) {
  .target-element {
    padding: 2em clamp(1vw, 4em, 4em);
  }
}
@media (min-width: 800px) and (max-width: 1199.98px) {
  .target-element {
    padding: 2em clamp(1vw, 4em, 5vw);
  }
}
@media (min-width: 500px) and (max-width: 799.98px) {
  .target-element {
    padding: 2em clamp(1vw, 4em, 3vw);
  }
}
@media (max-width: 499.98px) {
  .target-element {
    padding: 2em clamp(1vw, 4em, 1.5vw);
  }
}

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