Лучший способ рассчитать (javascript) пиксели из единичного представления (rem / vh / px / ...)

Question

В поисках простого, но надежного способа вычисления длины в пикселях из любой строки, например: "55rem" / "33vh" / "300px", в текущий браузер в пикселях.

Из того, что я понимаю, естьwindow.getComputedStyle (), но я не хочу, чтобы стиль был прикреплен к какому-либо фактическому элементу.Итак, учитывая, что меня не интересует процент любого вычисляемого элемента, просто простое преобразование единиц (по сравнению с текущим пользовательским браузером / масштабированием) - должно быть просто быть разумно рассчитанным каким-то псевдоэлементом?

Существуют некоторые решения, связанные с фактическим вычислением единиц, но я считаю, что для этого должно быть более простое решение с 3 строками (возможно, с использованием getComputedStyle или аналогичной функции) ...

Обновление: Может быть, это не должно быть сделано в JS.Или просто не лучшая практика ... Это тоже был бы ответ.Просто проверяю на ходу / нет идти на это ...

Answer 1

getComputedStyle - очень дорогая операция, так как она запускает перекомпоновку CSS каждый раз, когда вы ее вызываете. Я бы порекомендовал вычислять конверсии вручную, используя такие вещи, как window.innerHeight или document.body.style.fontSize (если он встроен, то есть).

Если вы используете Webpack, вы можете даже загрузить переменные SCSS , чтобы получить body размер шрифта.