Does vw include the scrollbar?

Yes. vw is measured against the viewport width, so on a desktop browser with a visible vertical scrollbar, 100vw is slightly wider than the content area and can cause horizontal overflow. Use 100% or a newer unit such as dvw when that matters.

Should font sizes use vw directly?

Not on their own. A pure vw font size becomes unreadable at extreme viewport widths and ignores the reader's own text size setting completely. Wrap it in clamp() between a minimum and maximum and keep a rem constant in the preferred value.

CSS / FRONTEND · RUNS IN YOUR BROWSER

PX to VW / VH Converter

Convert pixels to viewport units against your design file's dimensions.

Calculated against the design width and height you enter; 1vw equals one percent of the viewport width.

Design dimensions

Enter the canvas width and height the design actually uses so the ratio is right.

Design width

Design height

Pixel value

Reverse conversion

VW value

Equivalent pixels144px

Converted

VW (against width)4.4444vw

VH (against height)7.1111vh

Common size reference

Pixel value	vw	vh
`8px`	`0.5556vw`	`0.8889vh`
`12px`	`0.8333vw`	`1.3333vh`
`16px`	`1.1111vw`	`1.7778vh`
`24px`	`1.6667vw`	`2.6667vh`
`32px`	`2.2222vw`	`3.5556vh`
`48px`	`3.3333vw`	`5.3333vh`
`64px`	`4.4444vw`	`7.1111vh`
`96px`	`6.6667vw`	`10.6667vh`
`128px`	`8.8889vw`	`14.2222vh`
`240px`	`16.6667vw`	`26.6667vh`
`320px`	`22.2222vw`	`35.5556vh`

About this tool

Design files are usually drawn at a fixed width such as 1440px, and turning that into a layout that scales with the viewport means converting pixels into vw. Enter the design's width and height, then a pixel value, and you get both the vw and vh equivalents. The conversion also runs in reverse so you can check what a vw value works out to in real pixels.

How it works

Enter the design file's viewport width and height.
Enter a pixel value to get the matching vw and vh.
Copy the unit you need, or convert back to verify.

Privacy

Every calculation and preview runs inside this browser. Your input is never uploaded, stored, or written to the URL or any log.

Frequently asked questions

Does vw include the scrollbar?: Yes. vw is measured against the viewport width, so on a desktop browser with a visible vertical scrollbar, 100vw is slightly wider than the content area and can cause horizontal overflow. Use 100% or a newer unit such as dvw when that matters.
Should font sizes use vw directly?: Not on their own. A pure vw font size becomes unreadable at extreme viewport widths and ignores the reader's own text size setting completely. Wrap it in clamp() between a minimum and maximum and keep a rem constant in the preferred value.

← All CSS / Frontend tools