Tamanho responsivo para CSS

Para entender melhor o funcionamento, leia https://medium.com/@euharrison/trigonometria-do-font-size-a104c95fa9a

Função para sass

@function calc-responsive($value1, $width1, $value2, $width2) {
  $x1: $width1;
  $x2: $width2;
  $y1: $value1;
  $y2: $value2;
  $a: ($y2 - $y1) / ($x2 - $x1);
  $b: ($x2 * $y1 - $x1 * $y2) / ($x2 - $x1);
  @return calc(#{$a*100vw} + #{$b*1px});
}

Aplicando, teremos:

body {
  font-size: calc-responsive(16, 320, 30, 1920);
}

Calculadora

Útil para analisar o gráfico que gera e criar breakpoints

CALCULATE