CSS Units for Responsive Design

Convert between px, vw, vh, and % to build layouts that respond correctly to different screen sizes and orientations.

Реєстрація не потрібна

From

1rem

Context (affects rem/em/vw/vh/%)

Root font (px)

Parent font (px)

Viewport W (px)

Viewport H (px)

All conversions for 16 px

Root EM (rem)1 rem

EM (em)1 em

Points (pt)12 pt

Viewport Width (vw)1.11111 vw

Viewport Height (vh)1.77778 vh

Percent (%)100 %

Common pixel sizes → rem (at 16px base)

Responsive tips

📱

Viewport units (vw, vh) are great for hero sections and overlays but can cause issues on mobile where browser UI shifts. Use dvh when targeting modern browsers.

💡

For fluid typography, clamp() uses vw units: font-size: clamp(1rem, 2vw + 0.5rem, 2rem). Use the vw converter to calculate the middle value for your design.

📐

Percentage units are relative to the parent container, not the viewport. Enter the parent's pixel size in the context panel to get accurate % conversions.

🔍

The viewport dimensions in the context panel affect vw and vh conversions. Set them to your target breakpoints (e.g., 375px mobile, 1440px desktop) for accurate results.