Convert between CSS viewport units (vw, vh, vmin, vmax) and pixels at any screen size. Essential for responsive design and fluid typography.
| Unit | Value | Pixels (at current viewport) |
|---|
Common font sizes expressed as viewport units — useful for fluid type that scales with the screen.
1vw equals 1% of the viewport width. On a 1440px wide screen, 1vw = 14.4px. On a 375px mobile screen, 1vw = 3.75px. This makes vw useful for sizes that should scale proportionally with the browser width.
vmin is 1% of the smaller viewport dimension (width or height). vmax is 1% of the larger dimension. On a 1440×900 viewport, 1vmin = 9px (1% of 900) and 1vmax = 14.4px (1% of 1440). vmin is great for elements that should always fit on screen regardless of orientation.
dvh (dynamic viewport height) adjusts as mobile browser UI (address bar) shows/hides. svh (small viewport height) uses the smallest viewport height (browser UI visible). lvh (large) uses the largest (browser UI hidden). These are modern replacements for vh on mobile, where classic vh caused layout jumps.
Percentage (%) is relative to the parent element, while vw is always relative to the viewport. Use vw when you want an element to be a fixed fraction of the screen regardless of its parent's width — common for full-bleed sections, hero text, or elements that need to break out of a container.