What is the difference between em and rem?

rem is always relative to the root (html) font-size, so it stays predictable across the document. em is relative to the element's own font-size, or to the parent's font-size when used on the font-size property itself, which means ems can compound through nested elements.

What are dvh, svh and lvh units?

They are dynamic, small and large viewport-height units for mobile. svh measures the viewport when browser toolbars are visible, lvh when they are hidden, and dvh updates live as the bars show or hide. They solve the long-standing problem of 100vh overflowing on mobile.

How does the px to rem conversion work?

rem equals the px length divided by the root font-size. With the common 16px root, 24px is 1.5rem. The converter lets you set the root and element font-sizes so the rem and em results match your actual stylesheet rather than assuming 16px.

When can I use container query units like cqw?

Container units resolve against the nearest ancestor that declares container-type (size or inline-size) via the container shorthand. Without such an ancestor they have no defined container and fall back to the small viewport. They let a component size itself to its container rather than the viewport.

Are absolute units like cm accurate on screen?

Not physically. On screens CSS anchors 1in to 96px and derives cm, mm, pt and pc from that, so they are consistent with px but rarely match a real ruler. Absolute units are reliable for print stylesheets, where they map to true physical sizes.

CSS Units Reference — Gera Tools

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

CSS keeps adding units — viewport, container, and the small/large/dynamic viewport variants — and the relative ones depend on context that is easy to get wrong. This reference lists every common unit with its basis and includes a live converter for the length units you switch between most.

How it works

The converter takes a px length plus the values that the relative units depend on: the root font-size for rem, the element font-size for em, and the viewport size for vw and vh. It divides accordingly and also derives the print units using CSS’s fixed anchor of 1in = 96px (so 1pt = 96/72 px and 1cm = 96/2.54 px). The reference table tags each unit by type and explains its basis; the search box matches the unit, type, description, and basis.

Tips and notes

Prefer rem for type and spacing so a single root font-size scales the whole UI; reach for em when you want a value to track the local font-size.
Use dvh (or svh/lvh) instead of vh for full-height mobile layouts to avoid the address-bar overflow problem.
Container units (cqw, cqi, …) only resolve inside an element with a declared container-type; otherwise they fall back to viewport sizing.
Absolute units are consistent with px on screen but only physically accurate in print.

The relative conversions above are exact given the basis values you enter; change the root or viewport fields to match your own stylesheet.