尝试在CSS中使用calc()不工作

Question

这是我的CSS的简化版本:

h1 {
font-size: 3rem;
line-height: calc(1.5 * (100vw - 50) + 2);
}

行高的计算不起作用。这和100vw有关，但我不确定是什么。我的理解是，100vw应该转换为当前视口的100%像素(例如414…所以数学应该是:1.5 * (414 - 50) + 2).

如果移除vw单元，则计算工作(即1.5 * (100 - 50) + 2)。这是怎么回事?为什么100vw不工作?

这是我的小提琴:https://jsfiddle.net/wv68au4o/1/

Answer 1

行高:钙(1.5 *大众- 50 px) (100),

试试这个，然后根据你的需要减小px。