Viewport Unit Converter
Convert between px and viewport units (vw, vh, vmin, vmax, dvh, svh, lvh, container query units). Includes batch conversion and fluid clamp() generator.
Viewport Unit Converter
🔀 Conversion Mode
📏 Unit Type
Classic viewport width (1vw = 1% of viewport width)
Decimals
Viewport Dimensions
Input Value
Result
Quick Snippets
Batch Conversion
Enter multiple values (one per line or comma-separated)
Fluid clamp() Generator
Create responsive values that scale between breakpoints
Formula: clamp(min, calc(slope × 100vw + intercept), max)
Tip: Use vw for widths, vh for heights, vmin and vmax for responsive squares, and wrap them in clamp() to keep readable limits.
Viewport units: Based on browser viewport (vw, vh, vmin, vmax)
Small viewport: Smallest possible viewport (mobile with UI visible)
Large viewport: Largest possible viewport (mobile with UI hidden)
Dynamic viewport: Adjusts as browser UI appears/disappears
Container query: Based on container size, not viewport
What is a Viewport Unit Converter?
A viewport unit converter is a tool that translates pixel (px) values into CSS viewport-relative units: vw, vh, vmin, vmax, plus modern units like dvh (dynamic viewport height), svh (small viewport height), and container query units (cqw, cqh). These units are essential for building truly responsive layouts that adapt to any screen size without fixed breakpoints.
CodeHelper's Viewport Unit Converter includes 18 device presets, batch conversion, and a built-in fluid clamp() generator.
Modern CSS Viewport Units Explained
- vw / vh: Classic viewport width and height. 1vw = 1% of the viewport width.
- dvh: Dynamic viewport height: adjusts when the browser's address bar shows or hides on mobile.
- svh / lvh: Small and large viewport height variants for stable full-screen layouts.
- cqw / cqh: Container query units that respond to the parent container's size, not the viewport.
How to convert px to vw/vh
- Select a device preset or enter a custom viewport width/height.
- Enter the pixel value you want to convert.
- Choose the target unit (vw, vh, dvh, cqw, etc.).
- Use batch mode to convert multiple values at once.
- Copy the generated CSS value or clamp() expression.
Whether you are building mobile-first layouts, fixing the classic "100vh on iOS" problem with dvh, or implementing container query-based components, this free viewport unit calculator is an indispensable tool.
Frequently Asked Questions
How do I convert px to vw?
Divide the pixel value by the viewport width and multiply by 100. For example 192px on a 1920px wide screen is 192 / 1920 x 100 = 10vw. Pick a device preset or type your own width, enter the pixels, and the converter gives you the value with the number of decimals you want.
What is the difference between vh, dvh, svh and lvh?
vh is 1% of the viewport height as the browser defines it, which on mobile ignores the address bar. svh uses the small viewport with the browser UI visible, lvh the large viewport with it hidden, and dvh changes dynamically as the UI appears and disappears. For a full-screen section on phones, 100dvh or 100svh avoids the classic gap under 100vh.
How are container query units like cqw and cqh calculated?
They are percentages of the container, not the window: 1cqw is 1% of the container width and 1cqh 1% of its height, while cqi and cqb follow the inline and block axis. Enter the container size in the dimension fields and the converter uses those numbers. The container needs container-type: inline-size, or size if you use cqh or cqb.
Can I convert several values at once?
Yes. Paste them into the batch box separated by commas, semicolons or new lines. Units such as 16px or 10vw are accepted and stripped, and each line of the output shows the original value next to the converted one.
How does the fluid clamp() generator work?
Give it a minimum size at a minimum viewport and a maximum size at a maximum viewport. It computes the slope in vw and the offset in px, then writes clamp(min, calc(slope vw + offset), max). The value scales smoothly between the two breakpoints and never leaves the limits, with no media query needed.
Related
Free forever, no ads, no tracking. Support the project