Question

我做了一个scss

    scala> var data:Array[String]=Array("1","2")
    data: Array[String] = Array(1, 2)

    scala> data.mkString(",")
    res2: String = 1,2

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

然而收到了css：

@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}) ));

}

不是假设：

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

任何聪明的想法家伙？

Answer 1

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

MDN有很好的文档。

Answer 2

来自MDN calc() docs：

<强> /
师。右侧必须是<number>。

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

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

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

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

2 个答案: