响应式文本的 Calc 是无效属性答案

【问题标题】：Calc for responsive text is an invalid property响应式文本的 Calc 是无效属性
【发布时间】：2016-02-27 02:28:48
【问题描述】：

我做了一个scss

@mixin responsive_font-size($viewport-min : "320px", $viewport-max: "1320px", $font-size-min:"16px", $font-size-max:"40px") {
    font-size:calc( #{$font-size-min} + (#{$font-size-max} - #{$font-size-min}) * ( (100vw - #{$viewport-min}) / ( #{$viewport-max} - #{$viewport-min}) ));

}

假设给我一个工作代码，根据视口的大小将字体大小从 16px 限制为 40px。

然而收到 css：

calc( 16px + (40px - 16px) * ( (100vw - 320px) / ( 1320px - 320px) ))

没有像假设的那样工作：

https://jsfiddle.net/maszynka/73toqgcx/

各位有什么好主意吗？

【问题讨论】：

标签： css calc

【解决方案1】：

如果我没记错的话，CSS 的calc() 分区右侧必须有一个<number>。因此，基于单位的值不能用于这样的除法。

MDN 对此有很好的文档。

【讨论】：

谢谢。这对我有用：link。你知道为什么在 calc 中添加一个没有单位的值到 px 单位吗？比如 16px + (21-9)。

【解决方案2】：

来自MDN calc() docs：

/
分配。右侧必须是<number>。

您正试图将一个数字除以一定数量的像素。您必须使用数字。

也许这就是你想要达到的目标：

font-size: calc(16px + (40 - 16) * ( (100vw - 320px) / ( 1320 - 320)));

【讨论】：