PX to VW Converter

By Sumair Roudani · Updated October 27, 2026

PX to VW formula

vw = px ÷ viewport width × 100

One vw is 1% of the viewport width, so you work out what fraction of the screen your pixel value is and turn it into a percentage. Viewport height works the same way with the height: vh = px ÷ viewport height × 100. Converting px to vw is how you turn a fixed measurement from a design file into a size that scales with the screen.

Worked examples

• 24px on a 1440px desktop frame: 24 ÷ 1440 × 100 = 1.6667vw
• 16px on a 375px mobile frame: 16 ÷ 375 × 100 = 4.2667vw
• A 320px image on a 768px tablet frame: 320 ÷ 768 × 100 = 41.6667vw
• 64px of top padding on a 900px-tall screen: 64 ÷ 900 × 100 = 7.1111vh

PX to VW conversion table (1440px viewport)

1440px is a common desktop design width. At this size 1vw = 14.4px.

Converting vw back to px

To check what a vw value will look like on a given screen, reverse the formula: px = vw × viewport width ÷ 100. This is the quickest way to spot a value that won't work everywhere. A heading set to 5vw is:

• 18.75px on a 375px phone (5 × 375 ÷ 100)
• 72px on a 1440px laptop (5 × 1440 ÷ 100)
• 96px on a 1920px monitor (5 × 1920 ÷ 100)

The size more than quintuples across that range, which is why viewport-based sizes almost always need a minimum and a maximum.

When to use vw and vh

Viewport units suit things that should be sized relative to the screen rather than to the text: full-width hero sections, large display headings, decorative shapes, and gaps that should open up on wide monitors. They're also the moving part inside fluid type, where a size grows smoothly between a phone and a desktop.

Vh is useful for sections that should fill the screen, like min-height: 100vh on a landing hero. On mobile, the browser toolbar changes the visible height, so the newer svh, lvh and dvh units are often a better fit. MDN's viewport units reference lists all of them.

Common mistakes

• Pure vw font sizes. Text set only in vw doesn't get larger when the user zooms, and it scales to extremes on very small and very large screens. Wrap it in clamp() with rem limits. The CSS clamp() generator does the maths for you.
• Using the wrong frame width. Convert against the width of the design frame the value came from. 24px from a 375px mobile mockup is 6.4vw, not 1.6667vw.
• Setting width: 100vw on full-bleed sections. 100vw includes the scrollbar on many desktop setups and causes a sideways scroll. Use width: 100% where you can.
• Forgetting rem for most text. Body copy and UI labels usually belong in rem. Use the px to rem converter for those.