px to rem Converter - px, rem and em with a Custom Root Size and a Bulk CSS Mode

A rem is the font size of the root element, the html element. In most browsers that is 16px unless the user changed it, so 1rem is 16px, 1.5rem is 24px and 0.875rem is 14px. The conversion is px divided by the root size: 24px / 16 = 1.5rem. If your stylesheet sets html { font-size: 62.5% }, the root is 10px, so 24px becomes 2.4rem. Type your own root size above and every result follows it.

An em is relative to a font size too, but not the root one. For the font-size property, 1em is the parent element's font size. For every other property, such as padding, margin or width, 1em is the element's own font size. So 24px is 1.5em only when that font size is 16px. Because em values multiply as elements nest, rem is easier to reason about for spacing and type, and em is useful when a component should scale with its own text.

The reason to prefer rem over px is the user's own settings. Browsers let people choose a default font size, and many people raise it to read comfortably. A length in px ignores that choice, while a length in rem is multiplied by it, so a user who sets a 20px default sees 1.5rem as 30px. MDN advises preferring relative lengths for font-size for this reason, and WCAG success criterion 1.4.4 Resize Text expects text to scale to 200 percent without loss. One trap: if your CSS sets html { font-size: 16px }, the root no longer follows the user's setting, and rem stops respecting it. Use a percentage (100% or 62.5%) on the root instead.

The bulk converter reads your CSS with a tokenizer, so it changes only px lengths in real values: never a px inside a string, a url(), a comment or a selector. By default it keeps lengths of 1px or less as px, because a hairline border or outline should stay a thin line whatever the text size, and it leaves the conditions of @media and @container rules alone. Media Queries Level 4 says relative units in a media query are based on the initial value, "defined by the user agent or the user's preferences, not any styling on the page", so 48rem in a media query means 48 times the browser's default size whatever your html rule says. A breakpoint of 768px is 48rem only when the user's default is 16px. If you do switch media conditions on, they are converted at 16px, the browser default, whatever root size you typed, for the same reason. An @property rule is also left alone, because its initial value may not use a relative unit. You can name properties to skip, such as border* or box-shadow.