Calculate and convert vh, vw, vmin, and vmax CSS viewport units based on screen dimensions.
Takes a viewport width and height in pixels and converts between px and the four CSS viewport units: vh (1% of height), vw (1% of width), vmin (1% of the smaller axis), and vmax (1% of the larger axis). Every result is plain arithmetic, so a 1920x1080 viewport yields 1vw = 19.2px and 1vh = 10.8px. The common mistake is the input: the browser viewport is the window's inner size in CSS pixels, not the monitor resolution. Browser chrome, the OS taskbar, display scaling, and mobile URL bars all change the number the browser actually measures.
A concrete input and expected output from the current implementation.
Input
Viewport 1920 x 1080 Convert 50vw, 50vh, 10vmin, 10vmax to px
Expected output
50vw = 960px, 50vh = 540px, 10vmin = 108px, 10vmax = 192px
Each unit is 1% of one axis: vw and vmax follow the 1920px width (19.2px per unit), while vh and vmin follow the 1080px height (10.8px per unit). So 50 x 19.2px = 960px, 50 x 10.8px = 540px, 10 x 10.8px = 108px, and 10 x 19.2px = 192px.
Each unit is exactly 1% of a viewport dimension: vh is height divided by 100, vw is width divided by 100, vmin is the smaller per-unit value and vmax the larger. On a 1920x1080 viewport, 1vh and 1vmin are both 10.8px while 1vw and 1vmax are both 19.2px. Multiplying a unit value by any number gives the pixel equivalent, and dividing a pixel target by the unit value gives the unit amount.
The width and height entered are treated as the initial containing block the units measure against. Enter the window's inner size in CSS pixels, not the monitor's: zoom and display scaling shrink the CSS viewport (a 1920px monitor at 125% scaling presents a 1536px-wide viewport), and rotating a device swaps which axis vw and vh follow while vmin and vmax stay the same.
Mobile browsers size the viewport to the largest height the browser chrome allows, and 100vh measures that full size. While the URL bar is visible, the on-screen area is shorter. For elements that must fit what is visible, use the dynamic or small viewport units (dvh, svh) instead of vh.
No. It does arithmetic on the two numbers you enter and knows nothing about your browser or display. CSS pixels are logical units: at 150% display scaling, a 1440px-wide monitor presents a 960px-wide CSS viewport, and you must enter 960 for results that match what the browser actually lays out.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.