CSS Unit Converter
Convert between CSS units: px, rem, em, vw, vh, and %. Configure base font size and viewport dimensions for accurate results.
Settings
All Equivalents
| Unit | Value |
|---|---|
| px | 16px |
| rem | 1rem |
| em | 1em |
| vw | 0.833333vw |
| vh | 1.48148vh |
| % | 100% |
= 16 px
Quick Reference (px → rem)
| px | rem | em | vw | vh |
|---|---|---|---|---|
| 8px | 0.5rem | 0.5em | 0.416667vw | 0.740741vh |
| 12px | 0.75rem | 0.75em | 0.625vw | 1.11111vh |
| 14px | 0.875rem | 0.875em | 0.729167vw | 1.2963vh |
| 16px | 1rem | 1em | 0.833333vw | 1.48148vh |
| 18px | 1.125rem | 1.125em | 0.9375vw | 1.66667vh |
| 20px | 1.25rem | 1.25em | 1.04167vw | 1.85185vh |
| 24px | 1.5rem | 1.5em | 1.25vw | 2.22222vh |
| 32px | 2rem | 2em | 1.66667vw | 2.96296vh |
| 48px | 3rem | 3em | 2.5vw | 4.44444vh |
| 64px | 4rem | 4em | 3.33333vw | 5.92593vh |
How to Convert CSS Units
- Set your base font size (default: 16px) and viewport dimensions
- Enter a value and select its unit (px, rem, em, vw, vh, or %)
- View all equivalent values in other CSS units
- Check the quick reference table for common px-to-rem conversions
حالات الاستخدام
- •Responsive design: convert fixed pixel values to fluid rem or vw units
- •Design handoff: translate Figma/Sketch pixel specs into CSS rem values
- •Accessibility: use rem units so text respects user font-size preferences
- •Layout: calculate viewport-relative dimensions for full-bleed sections
الصيغة
CSS unit conversions depend on the base font size and viewport dimensions. rem = px / baseFontSize. vw = px / viewportWidth × 100. vh = px / viewportHeight × 100.
الأسئلة الشائعة
What is the difference between rem and em?
rem is relative to the root (html) font size. em is relative to the parent element's font size. At the root level, they are identical.
What is the default browser font size?
Most browsers default to 16px. This means 1rem = 16px unless the root font size is changed.
When should I use vw/vh?
Use vw (viewport width) and vh (viewport height) for elements that should scale proportionally to the browser window, like hero sections or full-screen backgrounds.
How do I convert px to rem?
Divide the pixel value by the base font size. With default 16px: 24px ÷ 16 = 1.5rem.
What is the % unit relative to?
The % unit is context-dependent in CSS. For font-size, it's relative to the parent's font-size. For width, it's relative to the parent's width.