Viewport Unit Calculator
Convert CSS viewport units such as vw, vh, vmin, and vmax precisely into pixels based on screen dimensions.
Viewport Unit Calculator
This calculator auto-updates when values change.
Pixel result
50vw = 720px
Viewport
1440px x 900px
CSS snippet
.element { width: 50vw; /* 720px */ }
About This Viewport Unit Calculator
This viewport unit calculator converts vw, vh, vmin, and vmax values into exact pixel values for a chosen viewport size.
It helps designers and developers reason about responsive CSS values before testing them in a browser.
How to Use This Tool
- 1
Enter viewport dimensions
Add the width and height in pixels, or use a common device preset.
- 2
Enter a viewport value
Type a value such as 50vw, 25vh, 10vmin, or 100vmax.
- 3
Review the pixel result
Use the result, common conversion table, and CSS snippet in your layout planning.
Frequently Asked Questions
What is 1vw?v
1vw equals 1% of the viewport width.
What is vmin?v
vmin uses the smaller of viewport width and viewport height.
Why can 100vw cause horizontal scrolling?v
On some systems, 100vw includes scrollbar width, making it slightly wider than the document body.