Convert px to rem, em, %, vw, vh, pt and more with your own root font size and viewport, see a px to rem table, and convert a whole stylesheet in one go.
Design files come in pixels, and accessible stylesheets are written in rem. Type a length here and read it in all 14 CSS units at once, worked out with your project’s own root font size and viewport instead of an assumed 16px and a guessed screen.
It opens on 24px, which is 1.5rem at the usual 16px root, and below that sits a real stylesheet ready to convert, a small .checkout-panel component.
Stylesheet mode is the part most converters lack. It leaves comments, strings and url() paths alone, so a file called hero-24px.png keeps its name, and it keeps values under Keep px below, 2px by default, because a 1px border should stay crisp when a reader enlarges their text. The label above the output counts the values it changed.
Every conversion goes through CSS pixels. Rem divides by the root font size, so 24 ÷ 16 = 1.5. Em and % use the parent font size, and vw and vh are one hundredth of the viewport, so at 1440 wide 10vw is 144px. Physical units are fixed by the CSS specification at 1in = 96px, which makes 1pt = 1.3333px and 1cm = 37.7953px. That is a rule for the browser, not a ruler: on screen an inch of CSS is rarely a real inch. It only matches on paper.
0px is left as it is. Results are rounded to 4 decimals here, and 2 to 6 in stylesheet mode. Leave @media conditions alone is on by default, so min-width: 768px stays put; turn it off and that becomes 48rem. Em in a real page compounds through nesting, so the parent size you enter holds for one element only. A blank box or a size of 0 shows “Font sizes and viewport sizes must be above 0.”
From
24px1.5rem1.5em150%1.6667vw2.6667vh2.6667vmin1.6667vmax18pt1.5pc0.25in0.635cm6.35mm25.4QConvert a whole stylesheet
Uses the root font size above. Comments, strings and url() paths are left alone.