PX ⇄ REM
Convert between pixels, rem and em using any root font size. Paste a whole stylesheet into bulk mode to swap every px value for rem in one go.
px, rem and em
rem is relative to the font size of the root <html> element, which is 16px in every major browser unless the user changes it. So 1.5rem is 24px by default. em is relative to the font size of the element's parent (or the element itself, for properties other than font-size), so it compounds when nested.
Using rem for font sizes and spacing means your layout scales when someone raises their browser's default font size, which is an accessibility win that fixed pixels don't give you. The formula is simply rem = px ÷ root size.
Bulk mode
Paste any CSS, SCSS or Less and every px value is rewritten as rem. It leaves url() paths, comments and quoted strings alone, keeps 1px hairline borders as pixels by default, and turns 0px into 0. Media query conditions are left in px by default because rem in a media query is always based on the browser default, not your root size. Flip the direction to turn rem back into px.
Questions
How many px is 1rem?
16px by default. If your CSS sets html { font-size: 62.5%; }, 1rem becomes 10px, which is why the 10px preset is here.
Should I use rem or em?
Use rem for most sizes, since it is predictable anywhere in the page. Use em when something should scale with its own text, such as padding on a button or the size of an icon next to a label.
What is 14px in rem?
0.875rem at the default 16px root. The quick reference table lists common sizes and updates when you change the root size.
Does changing the root size affect media queries?
No. rem and em inside a media query condition are always based on the browser's initial font size (normally 16px), regardless of what you set on html.