VW Units Explained: Sizing by Viewport Width
Viewport width units let layouts follow the window. This guide explains vw, how to convert it, and where it behaves unexpectedly.
What is the VW to PX Converter?
One vw is one percent of the width of the viewport, so it scales with the browser window. This tool multiplies a vw value by the viewport width to give the equivalent pixels. The same vw value therefore gives different pixels on a narrow phone and a wide monitor. Enter the width you are designing for, since the tool cannot measure your window for you.
How to use it
- Enter the vw value.
- Enter the viewport width in pixels.
- Press the button to see the pixel value.
Worked example
25 vw on a 1200 pixel wide viewport converts to 300 px.
How do I convert vw to pixels?
Multiply the vw value by the viewport width and divide by 100. For example, 25 vw on a 1200 pixel viewport is 300 pixels.
Frequently asked questions
What is 100 vw?
100 vw is the full width of the viewport, so on a 1200 pixel wide window it equals 1200 pixels.
Does vw include scrollbars?
It depends on the browser. Some browsers count the scrollbar in the viewport width and some do not, so vw layouts can differ by a few pixels.