CSS Unit Converter — px, rem, em, vw, vh, % Online
Convert between px, rem, em, vw, vh, %, pt, cm, mm, ch, vmin, vmax instantly. Set custom root font size and viewport dimensions. Browser-based.
Features
- ✓Convert between all CSS units: px, rem, em, vw, vh, %, pt, cm, mm, ch, vmin, vmax
- ✓Set custom root font-size (default 16px) for rem/em conversions
- ✓Set custom parent and element font-size for em calculations
- ✓Set viewport width and height for vw/vh/vmin/vmax conversions
- ✓Preset viewport sizes for common devices (iPhone, iPad, laptop, desktop)
- ✓Group results by absolute vs relative units
- ✓Click any result to copy to clipboard
- ✓Real-time conversion as you type
- ✓Instant results for all 11 target units simultaneously
- ✓All calculations run locally in your browser — no data sent to servers
How to Use
- 1Enter a numeric value in the input field.
- 2Select the source unit from the dropdown.
- 3View converted values for all other CSS units instantly.
- 4Adjust root font-size in Settings if your project uses a different base.
- 5Set viewport dimensions to match your target device or screen.
- 6Click a device preset (iPhone, iPad, etc.) to auto-fill viewport sizes.
- 7Click any result card to copy the value.
- 8Use this when migrating between px and rem in responsive designs.
- 9Use the viewport presets to test how vw/vh values behave on different screens.
- 10Compare absolute units (px, pt, cm, mm) with relative units (rem, em, %, vw).
Frequently Asked Questions
What is the difference between px, em, and rem?
∨
px is an absolute unit — 1px is always 1px. em is relative to the parent element's font-size. rem is relative to the root (html) font-size, typically 16px. rem is preferred for consistent sizing across components.
When should I use rem vs px?
∨
Use rem for font-sizes and spacing in responsive designs — it scales with the user's browser settings. Use px for elements that should stay fixed regardless of zoom, like borders or small decorative elements.
What are vw and vh units?
∨
vw = 1% of viewport width, vh = 1% of viewport height. For example, on a 1920px wide screen, 50vw = 960px. These are useful for full-screen sections and responsive typography.
What is the difference between vmin and vmax?
∨
vmin is 1% of the smaller viewport dimension (width or height), vmax is 1% of the larger. On a phone in portrait mode, vmin matches vw (width is smaller). vmax matches vh (height is larger).
What does 'ch' mean in CSS?
∨
ch is relative to the width of the '0' (zero) character in the current font. It's useful for setting max-width on text containers, like limiting a paragraph to 65ch for optimal readability.
What is the default root font-size in browsers?
∨
Browsers default to 16px for the root (html) element. Most CSS frameworks keep this default. Some designers change it to 10px or 62.5% for easier rem calculations (1rem = 10px).
How do I convert px to rem?
∨
Divide the pixel value by the root font-size. For example, 24px ÷ 16px = 1.5rem. This tool does it instantly — just enter the value and see all conversions.
Why are my rem values not matching expected px values?
∨
Check if your root font-size has been changed from the default 16px. If your CSS sets html { font-size: 14px }, then 1rem = 14px, not 16px. Use the Settings panel to match your project's root font-size.
Can I use this tool for print media?
∨
Yes. The absolute units (pt, cm, mm) are useful for print CSS. 1pt = 1/72 inch, 1cm = 96/2.54 px. Use these units when designing stylesheets for print layouts.
What viewport size should I use for mobile-first design?
∨
Common mobile viewports: iPhone SE (375x667), iPhone 14 (390x844), iPad (768x1024). For desktop: laptop (1366x768), full HD (1920x1080). Use the preset buttons in Settings to quickly switch.
Related Tools
Unit Converter — Length, Weight, Temperature, Volume, Area
Convert between metric and imperial units for length, weight, temperature, volume, and area. Instant, accurate, and easy to use. Browser-based.
Number Base Converter — Binary, Octal, Decimal, Hex
Convert numbers between binary, octal, decimal, and hexadecimal with step-by-step explanation. Perfect for programmers and students. Browser-based.
Color Converter — Convert HEX, RGB, HSL, HSV & CMYK Online
Convert colors between HEX, RGB, HSL, HSV, and CMYK formats instantly. Pick a color, see all converted values. Browser-based, no data uploaded.