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

width: 10vw;
Quick Snippets
width: 10vw;
height: 10vw;
font-size: 10vw;
margin: 10vw;
padding: 10vw;
gap: 10vw;

Batch Conversion

Enter multiple values (one per line or comma-separated)

Results will appear here...

Fluid clamp() Generator

Create responsive values that scale between breakpoints

font-size: clamp(16px, calc(3.1068vw + 4.3495px), 64px);

Formula: clamp(min, calc(slope × 100vw + intercept), max)

Tip: Use vw for widths, vh for heights, vmin/vmax for responsive squares

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: and 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

  1. Select a device preset or enter a custom viewport width/height.
  2. Enter the pixel value you want to convert.
  3. Choose the target unit (vw, vh, dvh, cqw, etc.).
  4. Use batch mode to convert multiple values at once.
  5. 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.

Related

toolClamp GeneratorGenerate responsive font-size clamp() CSS.toolSVG Wave GeneratorCreate customizable SVG wave shapes easily.toolAspect Ratio CalculatorCalculate aspect ratios and pixel dimensions for media and screens.toolColor Shades GeneratorGenerate a full range of tints and shades from any HEX color. Tailwind-compatible 50-950 scale, copy HEX/RGB/HSL values instantly. Free online color palette tool.

Free forever, no ads, no tracking. Support the project