Viewport Calculator

Convert between pixels and viewport units for responsive design

Viewport Unit Calculator

About Viewport Units:

Viewport units are relative to the browser's viewport dimensions. 1vw = 1% of viewport width, 1vh = 1% of viewport height.

Select Device Size

Viewport Width (px)

Viewport Height (px)

Pixel Value to Convert

Conversion Type

VW VH Both

Viewport Width (px)

Viewport Height (px)

VW Value

VH Value

Understanding Viewport Units

VW (Viewport Width)

1vw equals 1% of the viewport's width.

For example, if the browser width is 1000px, then 10vw equals 100px. As the viewport resizes, elements sized with vw will scale proportionally.

VH (Viewport Height)

1vh equals 1% of the viewport's height.

For example, if the browser height is 800px, then 50vh equals 400px. VH units are perfect for elements that should always be a percentage of the screen height.

When to use viewport units

For full-screen sections (100vh)
For text that scales with viewport (fluid typography)
For layouts that need to maintain proportions across all devices
For hero images, banners, and important UI elements

CSS Usage Examples

Common ways to use viewport units in your CSS:

/* Full-screen hero section */
.hero {
  height: 100vh;
  width: 100vw;
}

/* Fluid typography */
h1 {
  font-size: calc(2rem + 1.5vw);
}

/* Maintain aspect ratio */
.video-container {
  width: 80vw;
  height: 45vw; /* 16:9 ratio */
}

/* Responsive padding/margins */
.section {
  padding: 5vh 5vw;
}

/* Fixed header with viewport height */
.header {
  height: 10vh;
}

Combine viewport units with calc() for even more flexibility, such as calc(100vh - 80px) for a full-height section minus a fixed header.

Other Viewport Units

VMIN

1% of the smaller dimension
Equal to whichever is smaller: 1vw or 1vh
VMAX

1% of the larger dimension
Equal to whichever is larger: 1vw or 1vh
DVW

Dynamic viewport width
1% of the dynamic viewport width (new in CSS)
DVH

Dynamic viewport height
1% of the dynamic viewport height (new in CSS)