css - Calc for responsive text is an invalid property -
i made 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}) )); } which suppose give me working code limits font-size 16px 40px depending on size of viewport.
however received css:
calc( 16px + (40px - 16px) * ( (100vw - 320px) / ( 1320px - 320px) )) is not working suppose:
https://jsfiddle.net/maszynka/73toqgcx/
any briliant ideas guys?
if recall correctly, css's calc() division must have <number> on right side. reason unit based values cannot used in division this.
mdn has great documentation on this.
Comments
Post a Comment