0

I'm trying to scale my font-size between 0.875rem and 1.3rem for media widths 20rem to 40rem using the following css which works fine in Firefox and Chrome but not Safari where the calc() returns a value that is too big.

Any ideas how to make it work or different approaches I could 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;
  }
}
dippas
  • 58,591
  • 15
  • 114
  • 126
Andreas Larsen
  • 101
  • 3
  • 10
  • Isn't that calculation unnecessarily complex...why 40-20 and not just 20? Why 1.3 - 0875? Use real numbers and comment how you arrived at them. It might make the debugging easier. – Paulie_D Feb 02 '16 at 22:50
  • @Paulie_D it depends - it's like that to make it easy to change a variable. I'll add the sass version to make it easy to see what's going on – Andreas Larsen Feb 02 '16 at 23:30

0 Answers0