无需回流即可将 rem 转换为 px

Question

我在rems 中有一些常量，但rem它本身不是一个常量（取决于媒体查询和vmin）。对于某些人来说，我需要在px.

当然，我可以创建一个临时 div，将其大小设置为 in remand getComputedStyleof it 中的值以获取px. 但我想通过阅读计算样式来做到这一点而不会导致回流。

Answer 1

一个rem单位，等于根元素上 'font-size' 的计算值。( https://www.w3.org/TR/2013/CR-css3-values-20130730/#font-relative-lengths )

你可以很容易地用 1 rem =

parseInt(getComputedStyle(document.documentElement).fontSize))

Answer 2

根据定义 rem 是

\n\n

等于根元素上 font-size 的计算值。
\n 当在根元素的 font-size 属性上指定时，
\nrem 单位指的是属性\xe2\x80\x99s 的初始值。

\n\n

所以你应该能够通过以下方式获得它的大小：

\n\n

window.getComputedStyle(document.documentElement)[\'font-size\']\n

\n