CSS Unit Converter

Convert between px, em, rem, percent, vh, and vw units. Perfect for responsive design and accessibility. All calculations run completely offline in your browser. No data is sent to any server.

Value to Convert

From Unit

Root Font Size (px)

Parent Font Size (px)

Viewport Width (px)

Viewport Height (px)

Converted Values

px 16.00

em 1.00

rem 1.00

% 100.00

vh 1.48

vw 0.83

Formula Used

px = em × parent-font-size

Common CSS Unit Conversions

Base: 16px	px	em	rem	%
Small text	12	0.75	0.75	75
Base size	16	1.00	1.00	100
Large text	24	1.50	1.50	150

Understanding CSS Units

Why CSS Units Matter

Choosing the right CSS unit is crucial for responsive design, accessibility, and maintainability. Absolute units like px are fixed, while relative units like em, rem, and viewport units adapt to user preferences and screen sizes.

How to Use This Tool

Enter the value you want to convert
Select the source unit (what you're converting from)
Adjust base values if needed (root font size, parent font size, viewport dimensions)
View all converted values in the results panel

Practical Examples

Example 1: Converting a button padding

16px padding = 1em (if parent is 16px) = 1rem (if root is 16px)

Example 2: Full-width container

100vw = 100% of viewport width = 1920px on a 1920px screen

Frequently Asked Questions

What's the difference between em and rem?

em is relative to the parent element's font size, while rem is always relative to the root element's font size. Use rem for consistent scaling across your entire site.

When should I use viewport units?

Viewport units (vh, vw) are great for elements that should scale with the screen size, like hero sections, but be cautious as they don't account for browser UI elements.

Why do my em calculations seem wrong?

em units compound when nested. If a parent has font-size: 1.2em and its child also uses em, the child's size will be relative to 1.2em, not the root size.

Formulas & Assumptions

px to em: px ÷ parent-font-size

px to rem: px ÷ root-font-size

px to %: (px ÷ parent-font-size) × 100

px to vh: (px ÷ viewport-height) × 100

px to vw: (px ÷ viewport-width) × 100

Rounding: Values rounded to 2 decimal places for readability. Calculations use full precision internally.

Default assumptions: Root font size typically 16px, viewport dimensions based on common screen sizes.

Disclaimer

For informational and educational purposes only. Offline estimates and calculators may differ from production behavior or vendor tooling. For security-sensitive tasks and compliance, verify with official standards and qualified professionals.

Sources: CSS Values and Units Level specification, WCAG 2 accessibility guidelines, responsive design best practices

Menu

CSS Unit Converter px to em rem percent vh vw

AI Assistant

Was this tool helpful?