px vs rem: When the Conversion Is Safe and When It Changes Behavior
1rem is the computed font-size of the root element. With the browser default of 16px, 24px becomes 1.5rem. The px to rem converter does that rewrite across a stylesheet; this page covers what the rewrite changes and what it must not touch.
What rem buys you
Browser zoom scales px and rem alike, so zoom is not the reason. The difference appears when a user changes their default font size in browser settings: rem-based sizes follow it, px-based ones do not. That is the accessibility case for rem on type and on spacing that belongs to the type (padding around text, line-length limits in ch/rem).
What to leave alone
| Value | Keep as px | Why |
|---|---|---|
1px borders and outlines | yes | A hairline should stay a hairline; as a fractional rem its rendered width depends on the root size and zoom level, so it is not guaranteed to land on a whole device pixel. The converter skips values of 1px or less by default. |
| Box shadows, blur radii | usually | They are decoration; scaling them with text rarely helps. |
| Raster image dimensions | yes | The image has a fixed pixel size. |
| Media query breakpoints | do not rewrite | See below. |
Media queries are not relative to your root
In a media or container condition, em and rem resolve against the initial font size (the browser default), never against your html { font-size }. If your root is 62.5% (10px), converting @media (min-width: 768px) by your base would move the breakpoint. The converter therefore never rewrites @media, @container, @supports or @import preludes. If you want breakpoints in rem, divide by 16 yourself.
What the converter does and does not touch
- Rewrites
NpxwhereNis a number not glued to an identifier, somargin:-8pxconverts and the class name.x4pxdoes not. - Skips comments, quoted strings and
url(...). - Turns
0pxinto0, rounds to 4 decimals, and so writes12.5pxat base 16 as0.7813rem. - Does not understand
calc()semantics:calc(100% - 24px)becomescalc(100% - 1.5rem), which is correct, but a unit mix you wrote on purpose is rewritten like any other. - Is textual: it cannot know that a value feeds a canvas or a JS read of
getComputedStyle.
A root size of 62.5%
Setting html { font-size: 62.5% } makes 1rem = 10px at the default size for easy arithmetic. Because it is a percentage, it still scales with the user's default font size. Set the base field to 10 in the converter if you use it.