css - 如何获得 calc() 函数的无单位结果

Question

我正在使用此计算在我的网页中获得流畅的行高:

line-height: calc(1.42em + (1.55 - 1.42) * ((100vw - 300px) / (1080 - 300)));

除非我更改特定部分的 font-size(因为 line-height 应该用无单位数字表示，否则数学是有效的为了保持 font-size/line-height 比率)。

问题是:如何从该计算中获得无单位的结果？

我曾尝试删除 em 和 px 单位，但这破坏了效果。

如果我不使用这个计算，我可能会使用类似的东西:

body {
    font-size: 18px;
    line-height: 1.4;
}

例如，我可以让 calc() 函数返回 18px。但是，当我在其中使用其他多个单位时，如何让 calc() 函数返回无单位结果(如:1.4)。有什么方法可以将结果转换为无单位数字？

---

这是整个 CSS:

:root {
    --font: calc(16.2px + (18 - 16.2) * ((100vw - 300px) / (1080 - 300)));
    --verti: calc(1.42em + (1.55 - 1.42) * ((100vw - 300px) / (1080 - 300)));
}

html {
    font-family: "Georgia";
    font-size: var(--font);
    line-height: var(--verti);
}

.small {
    font-size: 0.8em;
}

这很好用。但是，类 .small 的 line-height 太大了。我可以为它执行另一个 calc() 函数，或者让预览 calc() 以无单位数字返回它的值。

Answer 1

不可能从 calc() 中得到一个无单位的值如果您的任何输入有单位。

但是在这个特殊情况下 line-height具体来说，需要注意的是 line-height: 1.4 的无单位值相当于line-height: 140% .同样3.1相当于310%等等。您应该能够修改您的 calc()用 % 输出所需值的方程式单位。

---

编辑:对于无单位值和百分比值，继承行为似乎有所不同，因此请谨慎使用此方法。如果您避免指定 line-height 应该没问题在父元素上。 https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#Prefer_unitless_numbers_for_line-height_values