响应文本的计算无效属性

Question

我做了一个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/

大家有什么好主意吗？

Answer 1

如果我没记错的话，CSS 的 calc() 师右边一定有一个 <number>。因此，基于单位的值不能像这样用于除法。

MDN 对此有很好的文档。

Answer 2

来自MDN calc() docs：

/
Division. The right-hand side must be a <number>.

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

也许这就是您要实现的目标：

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

响应文本的计算无效 属性

Calc for responsive text is an invalid property

css

calc

响应文本的计算无效属性