CSS ошибка синтаксического анализа при расчете размера шрифта

Question

У меня есть этот код в моем css:

@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1000 - 320)));
  }
}

Почему я получаю эту ошибку разбора при проверке CSS? Смотрите изображение ниже.

CSS Ошибка разбора

Answer 1

При использовании calc правая часть / должна быть числом. Смотрите mdn ссылку для правил. Таким образом, (1000 - 320) является выражением, поэтому его там не может быть, это должно быть число типа 680

font-size: calc(16px + (20 - 16) * ((100vw - 320px) / 680));