Viewport Unit Converter

CSS viewport units are relative length units that are calculated based on the size of the viewport - the visible area of a web page in the browser window. There are three categories of viewport units. The classic units (vw, vh, vmin, vmax) are based on the initial containing block. The newer units added in CSS Values Level 4 provide more precise control: dvw/dvh (dynamic - responds to browser chrome changes), svw/svh (small - uses smallest possible viewport), and lvw/lvh (large - uses largest possible viewport). Our Viewport Unit Converter lets you convert between all of these units and other CSS length units, helping you build responsive designs with confidence.

1. Enter Your Value: Type a numeric value and select the source unit (e.g. 16 vw). Use the common CSS value presets to quickly test standard spacing values like 8, 16, 24, 32, 48, and 64.
2. Set the Viewport Size: Choose a device preset (iPhone, iPad, desktop sizes) or enter custom viewport width and height. The root font size (for rem) and parent font size (for em) are also configurable. All conversions update instantly as you change any setting.
3. Read the Results: The primary conversion (to pixels) is shown prominently, while the full results table displays the equivalent value in every supported unit - viewport units, font-relative units, physical units, percentages, and more. Copy individual values or all values at once with one click.

• Classic Viewport Units (vw, vh, vmin, vmax): 1vw = 1% of viewport width, 1vh = 1% of viewport height, 1vmin = 1% of the smaller dimension (useful for ensuring elements fit in both orientations), and 1vmax = 1% of the larger dimension. These are based on the initial containing block and have excellent browser support.
• Dynamic Viewport Units (dvw, dvh, dvmin, dvmax): These units respond to dynamic changes in the viewport size caused by browser chrome (address bar, toolbars) appearing or disappearing as the user scrolls. On mobile browsers, 100dvh gives you the actual visible height including dynamic changes, solving the classic "100vh includes the address bar" problem.
• Small & Large Viewport Units (svw, svh, lvw, lvh): Small viewport units use the smallest possible viewport size (with browser chrome fully visible). Large viewport units use the largest possible viewport size (with browser chrome hidden). Using 100svh ensures your element fits even with the address bar showing, while 100lvh fills the full screen once the user scrolls.
• Physical & Font-Relative Units: px (CSS pixels), pt (points), cm, mm, in (inches), pc (picas), q (quarter-millimeters), rem (root em), em (parent em), ch (character width of "0"), and ex (x-height of "x"). The Viewport Unit Converter handles all of these alongside viewport units for complete CSS length conversion.

Viewport units are powerful but require careful usage:

• Typography: Use clamp() with vw units for responsive font sizes that stay within min/max bounds - e.g., font-size: clamp(16px, 2vw, 24px). Use the converter to find the right vw value for your target pixel size.
• Full-height elements: On mobile, height: 100vh can be larger than the visible area due to browser chrome. Consider using 100dvh (dynamic) or 100lvh (large) for full-screen layouts.
• Avoid overuse in body text: Viewport units on body text can cause accessibility issues because users cannot resize text that uses vw units in some browsers. Use rem for body text and reserve vw for headings and large elements.
• Test at multiple breakpoints: A value that works at 1440px may be too large at 375px or too small at 2560px. Use the Viewport Unit Converter with different device presets to verify your values across the full range of viewport sizes.