Convert pixel measurements from a design mockup into viewport units. Enter the artboard width and height to get vw, vh, vmin and vmax, convert vw or vh back to pixels, and see how the value renders on phones, tablets and desktops.
Last updated:
Direction
One value, or several separated by commas or spaces.
px
The design / artboard width
px
Enter your values to see the result.
Advertisement
Advertisement
How to use the PX to VW Converter
Choose the direction: px to vw/vh, vw to px or vh to px.
Enter one or more values, such as 24 or 16, 24, 48.
Set the viewport size your design was made for, e.g. 1440 × 900 or 375 × 812.
Read the result and check the breakpoint table to see how it scales on other screens.
Copy the CSS value or download the tables as CSV.
Viewport unit formulas
Conversion
Formula
Example (1440 × 900)
px → vw
px ÷ width × 100
24px = 1.6667vw
vw → px
vw × width ÷ 100
5vw = 72px
px → vh
px ÷ height × 100
90px = 10vh
vh → px
vh × height ÷ 100
50vh = 450px
vmin / vmax
px ÷ min/max(width, height) × 100
90px = 10vmin = 6.25vmax
1vw in pixels at common screen widths
Viewport width
1vw
10vw
Typical device
320px
3.2px
32px
Small phone
375px
3.75px
37.5px
Phone
768px
7.68px
76.8px
Tablet portrait
1024px
10.24px
102.4px
Tablet landscape
1440px
14.4px
144px
Desktop
1920px
19.2px
192px
Full HD monitor
Because vw scales with the screen, a value that looks right on your 1440px mockup will be 3.84 times smaller on a 375px phone. Check the breakpoint table above, and use clamp() to set limits.
Frequently asked questions
How do I convert px to vw?
Divide the pixel value by the viewport width and multiply by 100: vw = px ÷ viewport width × 100. On a 1440px design, 24px = 24 ÷ 1440 × 100 = 1.6667vw.
How do I convert vw to px?
Multiply the vw value by the viewport width and divide by 100: px = vw × width ÷ 100. 5vw on a 1440px-wide screen is 72px, and on a 375px phone it is 18.75px.
What is 1vw?
1vw is 1% of the viewport width. On a 1920px-wide browser window 1vw = 19.2px; on a 375px phone it is 3.75px. 1vh is 1% of the viewport height in the same way.
What are vmin and vmax?
vmin is 1% of the smaller viewport dimension and vmax is 1% of the larger one. They are useful for elements that should fit on screen in both portrait and landscape orientation.
Should I use vw for font sizes?
Pure vw font sizes become tiny on phones, huge on wide monitors and do not grow with browser zoom. Combine vw with rem inside clamp() to set a minimum and maximum, for example clamp(1rem, 0.8rem + 1vw, 1.5rem).
Does 100vw include the scrollbar?
Yes. On desktop browsers with classic scrollbars, 100vw includes the scrollbar width, so width: 100vw can cause a small horizontal scroll. Use width: 100% for full-width blocks inside the page.
What about 100vh on mobile?
On mobile browsers 100vh usually equals the largest viewport, with the address bar hidden, so content can be cut off. The newer units svh, lvh and dvh (small, large and dynamic viewport height) solve this in modern browsers.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.