The Complete Guide to CSS Viewport Units: VW & VH

In the era of responsive design, fixed layouts are a thing of the past. While REM and EM units are great for scaling text based on font size, Viewport Units allow your elements to scale based on the actual size of the user’s browser window.

What are Viewport Units?

Viewport units represent a percentage of the browser’s “viewport” (the visible area of the web page).

• VW (Viewport Width): 1vw is equal to 1% of the width of the viewport.
• VH (Viewport Height): 1vh is equal to 1% of the height of the viewport.
• VMIN: The smaller value of the two (VW or VH).
• VMAX: The larger value of the two (VW or VH).

Common Conversion Reference Table

This table assumes a standard Full HD Desktop (1920×1080) and a Modern Mobile (390×844) as the base for calculation.

Element Size (PX)	Desktop VW (1920px)	Desktop VH (1080px)	Mobile VW (390px)	Best Use Case
16px	0.833vw	1.481vh	4.102vw	Small margins/gaps
40px	2.083vw	3.704vh	10.256vw	Buttons & Spacing
100px	5.208vw	9.259vh	25.641vw	Feature Icons
250px	13.02vw	23.14vh	64.10vw	Sidebar/Cards
500px	26.04vw	46.29vh	128.20vw	Image Containers

Pro Tips for Using Viewport Units

1. The “Full Screen” Hero

To make a landing page section take up the entire screen regardless of the device, use:

CSS

.hero-section {
  height: 100vh;
  width: 100vw;
}

2. Fluid Typography with clamp()

Don’t just use VW for font sizes, or they might become too small on mobile. Use the clamp() function to set a minimum and maximum:

CSS

h1 {
  /* min-size, fluid-size, max-size */
  font-size: clamp(1.5rem, 5vw, 3rem);
}

3. Avoiding the Scrollbar Issue

Note that 100vw includes the width of the browser’s vertical scrollbar. In some browsers, this can cause a tiny horizontal scroll. To avoid this, some developers prefer using width: 100% for the outermost containers while using vw for internal elements.

Why Use Our Converter?

Our PX to Viewport Tool is designed for accuracy. By allowing you to input your specific design’s artboard size (like 1440px or 375px), you get the exact percentages needed to match your Figma or Adobe XD mockups perfectly.