css - 响应式字体大小 Calc() 错误

Question

我正在尝试使用以下 css 将我的字体大小在 0.875rem 和 1.3rem 之间缩放，媒体宽度为 20rem 到 40rem，它在 Firefox 和 Chrome 中运行良好，但不是 Safari，其中 calc() 返回的值太大。

任何想法如何使它工作或我可以采取不同的方法？

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;
  }  
}

编辑：添加了 sass 版本

$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;
  }
}