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

Popular posts from this blog

Delphi XE2 Indy10 udp client-server interchange using SendBuffer-ReceiveBuffer -

Qt ActiveX WMI QAxBase::dynamicCallHelper: ItemIndex(int): No such property in -

Enable autocomplete or intellisense in Atom editor for PHP -