CSS Unit Converter

CSS units define measurements for properties like width, height, font-size, margins. Two main types: absolute and relative. Absolute units (px, pt, cm) stay fixed. Relative units (rem, em, %, vh) scale based on context.

Most common ones? Pixels (px) for precise control, rem for scalable typography, percentages for flexible layouts, viewport units (vh/vw) for full-screen stuff. Each has its place—there's no one-size-fits-all.

Modern responsive design leans on relative units. They adapt to user preferences (like font size settings) and different screen sizes. Mix and match based on your needs—maybe px for borders, rem for text, % for layouts.

Absolute units are fixed—1px is always 1px, 1cm is always 1cm. They don't change based on anything else. Good for things that should stay consistent, like borders or icon sizes.

Relative units scale with context. rem scales with root font size, em with parent font size, % with parent dimensions, vh/vw with viewport. Change the base and everything adjusts.

Absolute: px, pt, cm, mm, in, pc. Relative: rem, em, %, vh, vw, vmin, vmax, ch, ex. For responsive design, relative units win—they adapt automatically. But absolute units still have uses, especially for fine details that need pixel-perfect control.

Use rem for most typography and spacing. It scales with the user's font size preference—accessibility win. Use px for things that must stay exact—borders, shadows, small icons.

I typically go rem for font-size, padding, margin, gap. Px for border-width, box-shadow, outline, maybe min-height for small UI elements.

Just be consistent and test with different user font size settings.

Viewport units scale with the browser window. 1vh is 1% of viewport height, 1vw is 1% of width. 1vmin equals 1% of the smaller viewport dimension. 1vmax equals 1% of the larger one.

Use cases: full-screen hero sections (height: 100vh), responsive font sizes (font-size: 5vw), maintaining aspect ratios.

Watch out on mobile—address bars can mess with vh.

Sometimes min-height: 100vh or 100dvh (dynamic viewport height) works better.

Em units are relative to the parent element's font size. If the parent has font-size: 20px, then 1em equals 20px in that context. Here's where it gets tricky—em compounds. Nested em values multiply, which can spiral out of control fast.

That's why rem exists—it's always relative to the root (html element), no compounding. I use em for things that should scale with their immediate context. For most stuff? Rem is safer and more predictable.

Mix them. Seriously. Use rem for typography and spacing, % or fr for layout widths, vh/vw for full-viewport stuff, px for fine details like borders.

Common pattern: font-size in rem, width in % or fr (in grid/flex), padding/margin in rem, border in px.

Avoid pixels for everything—kills scalability. Avoid em for everything—compounding nightmare.

Stick with rem as your default, sprinkle in other units where they make sense.