Question

我的sass代码中包含以下mixin，以获取可自动调整大小的字体大小：

value.indexOf(...)

我定义了一些变量来保持其清洁：

@mixin fluid-text($min-screenwidth, $max-screenwidth, $min-fontsize, $max-fontsize){
    font-size: calc( (#{$min-fontsize}) +
    (#{$max-fontsize} - #{$min-fontsize}) * 
    (100vw - #{$min-screenwidth}) / 
    (#{$max-screenwidth} - #{$min-screenwidth}));
}

最后我在h1标题上将此混音称为：

//text variables $min-screenwidth: 480px; $max-screenwidth: 1260px; //heading $min-landingheading-fontsize: 42px; $max-landingheading-fontsize: 65px;

由于我没有语法错误，因此不会出现我想要的样子。我读了一些有关calc的文章，有些人说calc在计算这类事情方面并没有得到改善。我简直不敢相信，因为我从演示文稿（https://youtu.be/Wb5xDcUNq48?t=1085）中获得了确切的语法

非常感谢您的帮助和麻烦。

MS

Answer 1

font-size: calc( (#{$min-fontsize}px) + (#{$max-fontsize} - #{$min-fontsize}) * (100vw - #{$min-screenwidth}px) / (#{$max-screenwidth} - #{$min-screenwidth}));

//text variables
$min-screenwidth: 480;
$max-screenwidth: 1260;
//heading
$min-landingheading-fontsize: 42;
$max-landingheading-fontsize: 65;

谢谢大家！

CSS calc（），具有多个单元的倍数乘法

1 个答案: