How CSS Units Relate to Each Other
CSS units fall into three families. Absolute units (px, pt, cm, mm, in) always represent the same physical size regardless of context, px being the CSS reference pixel that every other absolute unit is defined against. Relative units (rem, em, percent) scale based on another size: rem scales against the root (html) element's font size, em scales against the current element's own (usually inherited) font size, and percent scales against a parent value that varies by property (font-size, width, padding, etc. each resolve percent differently). Viewport units (vw, vh, vmin, vmax) scale against the browser viewport itself: 1vw is 1% of viewport width, 1vh is 1% of viewport height, and vmin/vmax pick whichever of the two is smaller or larger at any given moment.
Why rem and em Conversion Depends on Font Size
A rem value can't be converted to px without knowing the root font size, since 1rem literally means "whatever size the root element's font-size is currently set to," which is 16px by default in every major browser but can be changed by the page's own CSS or the user's browser settings. Set the base font size field to match your project's actual root font-size (commonly still 16px, sometimes 10px for easy mental math) for an accurate rem conversion. em works the same way but against the parent font size field instead, since em is relative to the current element rather than the root; a nested element's effective em size compounds with every ancestor that also uses em, which rem specifically avoids by always anchoring to the root.
Why vw, vh, vmin, and vmax Depend on the Viewport
Viewport units are defined as a percentage of the current browser viewport size, so converting them to px requires knowing that viewport's actual width and height, set via the viewport width and viewport height fields. vmin resolves to whichever of vw or vh is currently smaller, and vmax to whichever is larger, which is why both can look identical to vw on a very wide screen or identical to vh on a very tall one. Keep in mind that on mobile browsers, the viewport height used for vh calculations can shift as browser chrome (address bar, toolbars) shows or hides during scrolling, so a vh value's actual rendered size isn't always perfectly stable in practice the way it is in this calculator.
Physical Units and the 96px-per-Inch Convention
CSS defines pt, cm, mm, and in relative to px using a fixed, standardized ratio: 96px equals exactly 1 inch (and therefore 72pt, since 1 inch is defined as 72pt in typography), regardless of the screen's actual physical pixel density. This convention exists so CSS lengths behave predictably across devices with wildly different real pixel densities, but it does mean a "physical" CSS inch isn't guaranteed to measure exactly one real-world inch on every screen, since it depends on the browser and OS correctly reporting the display's DPI.
Common Responsive-Design Conversion Scenarios
Converting a fixed px value from a design mockup into rem is the most frequent use case, since most modern CSS codebases prefer rem for font sizes and spacing so everything scales correctly if a user changes their browser's default font size. Fluid typography (font sizes that scale smoothly between a minimum and maximum viewport width using clamp() or calc()) requires knowing the vw equivalent of both endpoint sizes at the design's minimum and maximum breakpoints, which this converter can compute directly by adjusting the viewport width field to each breakpoint in turn. It works as a px to rem converter and rem to px converter, a px to em converter and em to px converter, a vw vh converter, a css units calculator, a px to pt converter, and a viewport unit converter, making it useful for responsive css units across an entire design system.