CSS Units Converter
Convert between CSS units: px, rem, em, vw, vh, pt, cm, mm, in, vmin, vmax, and %. Adjust base font size and viewport settings for accurate results.
Frequently Asked Questions
What is the difference between rem and em in CSS?▼
rem (root em) is relative to the root element's font size (usually 16px by default), making it consistent throughout the document. em is relative to the font size of the parent element, so it compounds when nested. For example, if a parent has font-size: 1.5em and a child also has 1.5em, the child's actual size is 1.5 × 1.5 = 2.25 times the root font size. Use rem for predictable sizing and em when you want sizes to scale with their parent.
How do I convert px to rem in CSS?▼
To convert pixels to rem, divide the pixel value by the root font size (default is 16px). For example, 24px ÷ 16 = 1.5rem. If you've changed the root font size in your CSS (html { font-size: 18px; }), divide by that value instead. Common conversions: 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem.
When should I use vw, vh, vmin, or vmax units?▼
Use vw (viewport width) and vh (viewport height) when you want elements to scale with the browser window size. 1vw equals 1% of the viewport width, and 1vh equals 1% of the viewport height. vmin uses whichever is smaller (viewport width or height), while vmax uses the larger. Common use cases: full-screen sections (100vh), responsive typography (font-size: 4vw), and fluid layouts. Be cautious with vh on mobile browsers where the address bar can affect the viewport height.