What this tool does
Absolute units have fixed ratios in CSS: 1in = 96px = 2.54cm = 25.4mm = 72pt = 6pc, and 1Q is a quarter of a millimetre. A CSS pixel is a reference unit, not a device pixel, so 1in on screen is not a physical inch. Font-relative units need context: rem is the root (html) element's font size; em is the element's own font size, except in font-size itself, where it is the parent's; and % depends on the property, a share of the parent's font size for font-size but of the containing block's width for width, padding and margin. Viewport units are 1% of the viewport's width (vw) or height (vh), and vmin and vmax use the smaller or larger of the two. The converter turns a value into px with your settings and then into every other unit, rounded to 4 decimal places. Stylesheet mode reads the CSS structure: it converts lengths only in declaration values, including custom properties and calc(), never in selectors, comments (/* */ and // lines), strings or url(). It leaves 0 as it is, can keep 1px hairlines in px, and by default skips @media, @import and @custom-media conditions, where rem means the browser's initial font size instead of your html font size.
Example input and output
24pxrem 1.5rem
em 1.5em
% 150%
pt 18pt
pc 1.5pc
in 0.25in
cm 0.635cm
mm 6.35mm
Q 25.4Q
vw 1.6667vw
vh 2.6667vh
vmin 2.6667vmin
vmax 1.6667vmaxem and % here use a 16px parent font size; % of a container width gives a different answer.
.btn {
padding: 12px 20px;
font-size: 14px;
border: 1px solid #d1d5db;
border-radius: 6px;
margin: 0;
}.btn {
padding: 0.75rem 1.25rem;
font-size: 0.875rem;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
margin: 0;
}4 values converted on 3 lines. The 1px border stays in px because Keep 1px hairlines is on, and margin: 0 has no unit to convert.
html { font-size: 62.5%; }
.card { padding: 24px; }
@media (min-width: 768px) {
.card { padding: 32px; }
}html { font-size: 62.5%; }
.card { padding: 2.4rem; }
@media (min-width: 768px) {
.card { padding: 3.2rem; }
}With Skip @media conditions off, 768px would become 76.8rem. In a media query 1rem is the browser's initial font size (16px by default), so that breakpoint would move to 1228.8px.
Common errors and fixes
- Can’t read that value
- Enter a number with an optional unit, such as 24, 24px or 1.5rem. Use a dot for decimals (1.5, not 1,5) and one of the listed units; calc() expressions are not evaluated.
- My breakpoints moved after converting to rem
- rem and em in media queries are based on the browser's initial font size, not on html { font-size }. Keep Skip @media conditions on, or convert breakpoints with a 16px root.
- Everything is slightly bigger or smaller than before
- The root font size here must match what html { font-size } computes to in your CSS: 16px by default, 10px with font-size: 62.5%. Also remember that em compounds: 1.2em inside another 1.2em element is 1.44 times the outer size.
- No px values to convert
- Only lengths in declaration values change. Values in selectors, comments, strings and url() are skipped on purpose, as are preprocessor calls such as @include space(16px). Check the direction too: px → rem looks for px, rem → px for rem.
- 1px borders stayed in px
- Keep 1px hairlines is on by default because a border in rem can work out to a fraction of a pixel and render blurry or vanish at some sizes. Turn it off to convert every value, including 1px and smaller.
- width: 100vw adds a horizontal scrollbar
- On desktop browsers with visible scrollbars, 100vw can include the vertical scrollbar and so be wider than the page. Use width: 100% for full-width blocks, and keep vw for sizes that should scale with the window.
Common use cases
- Converting px values from a design file to rem for an accessible type scale
- Migrating a legacy stylesheet from px to rem in one pass
- Checking what a vw or vh value means at a given screen size
- Converting pt, mm, cm and in for print stylesheets
- Turning rem back into px to compare with a design
Privacy and security notes
- Values and stylesheets are converted by JavaScript in this browser tab. They are not sent to DevPrix or stored on a server.
- Opening a .css file reads it locally in the page; the file is not uploaded.
- Share copies a link that carries your value or stylesheet after the # in the URL, and opening it restores it. Browsers do not send that part to servers, but anyone you give the link to can read it. The root font size and viewport settings are not included.
Frequently asked questions
Should I use rem or em?
Use rem for most sizes: it always refers to the root font size, so 1.5rem means the same thing everywhere. Use em when a size should follow the element's own text, such as padding on a button that comes in several font sizes. em compounds when nested, and in font-size it refers to the parent's size, which makes deep components harder to predict.
Why does rem respect the user's font size setting when px does not?
Browsers let people choose a default font size, and the root element's font-size starts at that size (16px unless changed). Lengths in rem scale with it, so text and spacing grow for someone who set 20px. Lengths in px stay fixed. Zoom scales both, but the font size setting only affects relative units, and setting html { font-size } in px cancels it for the whole page; a percentage such as 62.5% keeps it.
Why skip media queries when converting a stylesheet?
In a media query, rem and em are based on the browser's initial font size, not on html { font-size }. If your root size is 10px, 768px becomes 76.8rem, which a media query reads as 1228.8px with default settings. With a 16px root the numbers are the same, and some teams write breakpoints in em on purpose so that they follow the user's font size setting. That choice is yours, so the tool leaves them alone by default.
Is a CSS pixel the same as a screen pixel?
No. A CSS pixel is a reference unit; the browser maps it to device pixels using the device pixel ratio, which is 2 or 3 on most phones and many laptops. That is why 1in in CSS is 96px but is rarely a physical inch on screen. Absolute units are exact on paper, which is where pt, mm and cm are most useful.
What viewport size should I enter for vw and vh?
Enter the CSS viewport you design for, in CSS pixels, such as 1440 × 900 for a laptop or 390 × 844 for a phone. On phones, vh is based on the larger viewport with the browser's toolbars hidden; the svh and dvh units exist for the smaller or the current one.