В чем ошибка css?

Question

[r_g_b_a]

Нашел пример реализации отзывчивого font-size

font-size: calc(16px + (23 - 16) * (100vw - 640px) / (1439 - 640));

Хочу вместо пикселей использовать rem

font-size: calc(1rem + (1.5625rem - 1rem) * (100vw - 576px) / (1199 - 576));

Браузер выдает ошибку о некорректном значении свойства. Объясните, в чем заключается ошибка?

Answer 1

[Юрий]

Вот этот кусок мешает: (1.5625rem - 1rem) *
Какие единицы должны получиться в результате выполнения calc? Пиксели в квадрате? :)
Судя по всему, это коэффициент, который берётся из отношения базового размера шрифта к текущему, так что единицы измерения там в любом случае не нужны.

Answer 2

[Икотий Айтишевич]

rem — это относительная единица, а px абсолютная. Поэтому ошибка.

Comments

[r_g_b_a]

разве их нельзя использовать вместе?
https://jsfiddle.net/8n7ub5h6/

[Юрий]

r_g_b_a, их нельзя делить и умножать. При сложении единица измерения остаётся прежней, при умножении и делении получаются уже другие единицы, которых в html не существует )