css - Responsive Font Size Calc() Bug -
i'm trying scale font-size between 0.875rem , 1.3rem media widths 20rem 40rem using following css works fine in firefox , chrome not safari calc() returns value big.
any ideas how make work or different approaches take?
https://jsfiddle.net/larsenwork/gjhc9bzp/2/
html { font-size: 0.875rem; } @media (min-width: 20rem) { html { font-size: calc(0.875rem + (1.3 - 0.875) * ((100vw - 20rem)/(40 - 20))); } } @media (min-width: 40rem) { html { font-size: 1.3rem; } }
edit: added sass version
$min-font: 0.875; $max-font: 1.3; $min-font-media: 20; $max-font-media: 40; html { font-size: $min-font + rem; } @media (min-width: $min-font-media + rem) { html { font-size: calc(#{$min-font + rem} + (#{$max-font} - #{$min-font})* ((100vw - #{$min-font-media + rem})/(#{$max-font-media} - #{$min-font-media}))) } } @media (min-width: $max-font-media + rem) { html { font-size: $max-font + rem; } }
Comments
Post a Comment