反应混合单位错误：无法在CSS calc（）函数中一起计算vw和px

Question

[我想在React中使用css calc（）使字体大小流畅，但是当我将单位vw和px混合使用时，它总是抛出错误。

font-size: calc(14px + (26px - 14px)) * ((100vw - 300px) / (1600 - 300));

出现错误，SASS无法编译100vw-300px。

解决此问题的最佳方法是什么？

Answer 1

好吧，如果您告诉我们错误是什么，但是可以尝试：

("100vw - 300px")

在此处查看更多Is it possible to use vh minus pixels in a CSS calc()?

Answer 2

在CSS calc中，乘法或除法运算符必须具有无单位数作为操作数之一。

The MDN Docs say:

*乘法。至少一个参数必须为<number>。

/部门。右侧必须为<number>。

您的乘法违反了此规则。简化就是这样：

calc(26px * (100vw - 300px) / 1300);

这是非法的，因为26px或(100vw - 300px)都不是无单位数。

---

[在14px)之后也有一个特别的括号，这使它成为语法错误，就像您在问题中所写的一样。