How to convert px to rem and other CSS units
- Set your root font size (16px unless your CSS changes it). Add the viewport size if you convert vw or vh.
- To convert one value, type it, pick its unit, and copy any result: px to rem, rem to px, px to em, pt, vw, vh, %, vmin, vmax, cm, mm, or inches.
- To convert a stylesheet, switch to "Convert a CSS file", paste your CSS, and copy the result with every px value turned into rem or em.
The bulk converter skips comments, strings, and url(...) so file names such as bg-24px.png stay intact. Media queries are left in px by default, because rem-based breakpoints respond to the user's browser font size and not only to the screen.
Questions
Is my CSS uploaded?
No. All conversions are plain arithmetic in your browser. Your CSS never leaves the page.
How many pixels is 1rem?
By default 16px, because browsers set the root font size to 16px. If your site sets html { font-size: 62.5% } then 1rem is 10px. Change the root font size above to match your project.
What is the difference between rem and em?
rem is relative to the root (html) font size, so it is the same everywhere. em is relative to the font size of the element itself, or of its parent for font-size, so nested elements compound. Use rem for predictable spacing and type scales.
Why are 1px borders left alone?
A border of 1px converts to 0.0625rem, which can render blurry or disappear at some zoom levels. The option "Keep 1px borders" leaves values of 1px or less as they are. Turn it off to convert everything.
How are pt, vw, and % calculated?
CSS defines 1pt as 1/72 inch and 1px as 1/96 inch, so 1pt is about 1.333px. vw and vh are 1% of the viewport width and height you enter. A percentage refers to the parent size you enter.
Credits
Built by OneTooling using standard browser features. No third-party code runs on your data.