PX to REM Converter — rem, em, pt and Every CSS Unit

rem is the font-size of the root element, 16px unless the page or the reader changes it, so px to rem is a division: 24px at a 16px root is 1.5rem, and at a 10px root it is 2.4rem. em is the font-size the element itself has, which is the one it inherits unless it sets its own, and in the font-size property em and % both refer to the parent. The absolute units are fixed ratios in CSS Values 4: 1in is 96px and 2.54cm, 1pt is 1/72in, 1pc is 12pt and 1Q is a quarter of a millimetre. Worked as fractions, 12pt is exactly 16px rather than 15.999999999999998. vw and vh are percentages of the viewport size you give, and ch and ex use the 0.5em that the specification assumes when a font’s metrics are unknown, which real fonts only approximate. Results are rounded to four decimal places by default, which at a 16px root is accurate to under a thousandth of a pixel; two places turns 13px into 0.81rem, which is 12.96px.

The reason to use rem at all is the browser’s default font-size setting. Page zoom scales px and rem alike, and is how most sites meet WCAG 1.4.4 Resize Text, but some readers enlarge the default text size instead, because it makes text bigger without making the whole layout bigger. A font-size in px ignores that setting; one in rem follows it. The 62.5% trick sets html { font-size: 62.5% } so that 1rem is 10px and the arithmetic is easy. It still follows the reader’s setting, but any text that is not given its own size renders at 10px until body is reset, and a third-party component whose styles assume a 16px rem shrinks to 62.5% of its intended size.

The stylesheet converter reads CSS with a tokeniser that follows CSS Syntax Level 3, so only numbers with a px unit in declaration values are changed: px inside a string, a url(), a comment, a selector or an at-rule prelude is left exactly as written, and so is 0px. Values of 1px or less are kept by default: a hairline is usually meant to stay one, and border widths are snapped down to whole device pixels, so converting one gains little. Media queries are left in px unless you choose otherwise, because Media Queries Level 4 evaluates em and rem in a query against the browser’s initial font size, never against html { font-size }. Converted with a 10px root, 768px would become 76.8rem, which the browser reads as 1228.8px; postcss-pxtorem’s mediaQuery option does exactly that. Here the em option always divides by 16 and writes em, whatever the root.