I have some constant in rems, but rem itself isn't a constant (depends on media queries and vmin). For some perpoise I need this value in px.
Of course I can create a temporary div, set its size to that value in rem and getComputedStyle of it to get value in px. But I'd like to do that without causing a reflow by reading the puted style.
I have some constant in rems, but rem itself isn't a constant (depends on media queries and vmin). For some perpoise I need this value in px.
Of course I can create a temporary div, set its size to that value in rem and getComputedStyle of it to get value in px. But I'd like to do that without causing a reflow by reading the puted style.
- You need to be more clear. From your ments, I believe you are saying that the value of some of your child elements changes based on media queries and vmin. Not that rem, the root em, itself changes which isn't true. – Rob Commented Jul 9, 2017 at 22:01
-
@Rob, no
remitself depends on media queries and vmin. But there are other changes and I don't want to force recalculation between them. – Qwertiy Commented Jul 9, 2017 at 22:22 -
Again, either you aren't being clear on how this rem value is being changed or you don't understand how rem is calculated. Are you changing the font size on the
<html>element in some way? – Rob Commented Jul 10, 2017 at 2:02 -
@Rob
@media (...) { html { font-size: ...vmin; } }. – Qwertiy Commented Jul 10, 2017 at 7:17
2 Answers
Reset to default 13A rem unit equal to the puted value of ‘font-size’ on the root element. (https://www.w3/TR/2013/CR-css3-values-20130730/#font-relative-lengths)
You can get that easily enough with 1 rem =
parseInt(getComputedStyle(document.documentElement).fontSize)
By definition rem is
Equal to the puted value of font-size on the root element.
When specified on the font-size property of the root element,
the rem units refer to the property’s initial value.
So you should be able to get it's size with:
window.getComputedStyle(document.documentElement)['font-size']