CalculateY CalculateY

Viewport Unit Calculator

Viewport units in CSS are calculated as a percentage of the browser viewport dimensions: 1vw = 1% of viewport width, 1vh = 1% of viewport height, 1vmin = 1% of the smaller dimension, and 1vmax = 1% of the larger dimension. On a 1920x1080 screen, 10vw equals 192px (1920 x 0.10), and 50vh equals 540px (1080 x 0.50). Enter a value with its unit and viewport dimensions below to convert across all five viewport unit types instantly.

Quick Answer

On a 1920x1080 viewport, 10vw equals 192px, 10vh equals 108px, 10vmin equals 108px, and 10vmax equals 192px.

Value to Convert

Viewport Dimensions

Common Examples

Input Result
100px on 1920x1080 viewport 5.2083vw, 9.2593vh, 9.2593vmin, 5.2083vmax
50vw on 1440x900 viewport 720px
25vh on 1920x1080 viewport 270px, 14.0625vw
10vmin on 1920x1080 viewport 108px (based on height, the smaller dimension)
10vmax on 375x812 viewport 81.2px (based on height, the larger dimension)

How It Works

CSS viewport units are defined relative to the browser viewport (the visible area of the page):

vw (viewport width): 1vw = 1% of the viewport width

vh (viewport height): 1vh = 1% of the viewport height

vmin (viewport minimum): 1vmin = 1% of the smaller viewport dimension

vmax (viewport maximum): 1vmax = 1% of the larger viewport dimension

Converting px to viewport units

  • px to vw: vw = (px / viewport width) x 100
  • px to vh: vh = (px / viewport height) x 100
  • px to vmin: vmin = (px / min(width, height)) x 100
  • px to vmax: vmax = (px / max(width, height)) x 100

Converting viewport units to px

  • vw to px: px = vw x viewport width / 100
  • vh to px: px = vh x viewport height / 100
  • vmin to px: px = vmin x min(width, height) / 100
  • vmax to px: px = vmax x max(width, height) / 100

Common viewport sizes

  • Desktop: 1920x1080, 1440x900, 1366x768
  • Tablet: 768x1024, 1024x768
  • Mobile: 375x812 (iPhone), 360x800 (Android)

Worked Example

For a value of 100px on a 1920x1080 viewport: vw = (100 / 1920) x 100 = 5.2083vw. vh = (100 / 1080) x 100 = 9.2593vh. The smaller dimension is 1080 (height), so vmin = (100 / 1080) x 100 = 9.2593vmin. The larger dimension is 1920 (width), so vmax = (100 / 1920) x 100 = 5.2083vmax.

For 50vw on a 1440x900 viewport: px = 50 x 1440 / 100 = 720px.

Related Calculators

PX to REM Converter

Convert between pixel (px) and rem CSS units based on any root font size.

CSS Clamp Calculator

Generate CSS clamp() values for fluid typography and spacing between two viewport widths.

Frequently Asked Questions

What is the difference between vw and %?
The vw unit is always relative to the viewport (browser window) width, regardless of the element's parent. A percentage (%) is relative to the parent element's width. If an element is inside a 500px container, 50% equals 250px, but 50vw equals half the viewport width regardless of the container.
When should I use vmin or vmax?
vmin is useful for sizing elements that should scale with the smaller dimension, which is helpful for keeping elements visible on any orientation. vmax scales with the larger dimension. A common use case is font-size: 5vmin for text that remains readable in both portrait and landscape orientations.
Why do viewport units not match my screen resolution?
Viewport units are based on CSS pixels, not physical device pixels. High-DPI (Retina) screens have a device pixel ratio of 2x or 3x, meaning a 1440-CSS-pixel-wide viewport may actually span 2880 or 4320 physical pixels. CSS viewport units use the CSS pixel viewport dimensions.
What are the new viewport units (svh, lvh, dvh)?
CSS introduced svh (small viewport height), lvh (large viewport height), and dvh (dynamic viewport height) to address mobile browsers where toolbars expand and collapse. svh uses the smallest possible viewport, lvh uses the largest, and dvh adjusts dynamically. The traditional vh typically matches lvh.
Can viewport units cause horizontal scrollbars?
Yes. Using 100vw includes the scrollbar width, which can cause horizontal overflow. For full-width layouts, width: 100% is generally safer than width: 100vw because percentage-based width accounts for the scrollbar.