Почему возникает ошибка при делении ширины на высоту viewport?

Question

[Andrey]

Была идея менять шрифт в зависимости от размера viewport, как будтко блок с текстом это картинка и он будет пропорционально масштабироваться

font-size: calc(165 * (calc(100vw / 1920) / calc(100vh / 1080)));

но это правило выдаёт ошибку.
Упращённая формула, которая выдаёт ошибку:
font-size: calc(100vw / 100vh);

собственно как можно это на css реализовать?

Answer 1

[Сергей delphinpro]

Разные величины, по-моему, можно только складывать и вычитать. Умножать и делить можно только одинаковые размерности, либо один из операндов должен быть безразмерным.

Честно говоря, я не понимаю, чего вы хотите получить, и в какой величине должен получиться итоговый размер шрифта.

Отвлечённо, как вариант, можно привлечь javascript

{
  --ratio: calc(1920 / 1080); // По умолчанию
  font-size: calc(165 * var(--ratio));
}

const ratio = (screen.width / 1920) / (screen.height / 1080);
element.style.setProperty('--ratio', `${ratio}px`);