Convert px, rem, em, viewport, percentage, and print units with live formulas for responsive layouts.
| Unit | Equivalent (base 16px) | Type | Description | Best Used For |
|---|---|---|---|---|
| px | 1px = 1px | Absolute | Pixels - screen dots | Borders, shadows, precise sizing |
| rem | 1rem = 16px | Relative | Root element font size | Font sizes, spacing (scalable) |
| em | 1em = 16px* | Relative | Parent element font size | Padding/margin relative to font |
| % | 100% = parent size | Relative | Percentage of parent | Widths, heights, fluid layouts |
| vw | 1vw = 14.4px* | Viewport | 1% of viewport width | Full-width sections, fluid type |
| vh | 1vh = 9px* | Viewport | 1% of viewport height | Full-height sections, hero areas |
| vmin | 1vmin = min(vw,vh) | Viewport | 1% of smaller viewport dimension | Square elements, responsive icons |
| vmax | 1vmax = max(vw,vh) | Viewport | 1% of larger viewport dimension | Background sizing |
| pt | 1pt = 1.333px | Absolute | Points (print) | Print stylesheets |
| pc | 1pc = 16px | Absolute | Picas (print) | Print stylesheets |
| cm | 1cm = 37.795px | Absolute | Centimeters | Print layouts |
| mm | 1mm = 3.779px | Absolute | Millimeters | Print layouts |
| in | 1in = 96px | Absolute | Inches | Print layouts |
| ch | - width of "0" | Relative | Width of the "0" character | Input widths, monospace layouts |
| ex | - 0.5em | Relative | x-height of current font | Vertical alignment |
* Values marked with asterisk depend on viewport/parent settings above.
This CSS unit converter helps frontend developers translate px, rem, em, viewport, and print units for responsive layouts, accessible typography, and design system tokens.
Yes. It is especially useful when switching between px, rem, em, and viewport-based units in responsive interfaces.
Base font size affects rem and em conversions, so matching it to your project gives you accurate output.
Explore 500+ free tutorials across 20+ languages and frameworks.