PX to VW Converter
Convert pixels to viewport width units for fluid responsive layouts. Set your design viewport width for accurate conversion.
Formula
vw = (px ÷ viewport width) × 100
Quick Reference Table
What Are Viewport Width Units?
The vw unit stands for "viewport width." One vw equals exactly 1% of the browser window's width. If someone's browser window is 1440 pixels wide, then 1vw equals 14.4 pixels. Resize that window to 768 pixels, and 1vw drops to 7.68 pixels. The value is always recalculated live as the window changes size.
This makes vw fundamentally different from rem or em, which are based on font sizes. Viewport units respond to the screen itself, not to any element in your HTML. That is why they are popular for creating layouts that truly fill the screen, or typography that scales with the window.
CSS offers four main viewport units: vw (width), vh (height), vmin (the smaller of vw or vh), and vmax (the larger of vw or vh). Newer browsers also support dvw, svw, and lvw for dynamic, small, and large viewport variations.
Common Viewport Sizes
When converting px to vw, the result depends entirely on what viewport width you are designing for. Here are the most common screen widths and what 1vw equals on each:
Mobile
375px
1vw = 3.75px
Tablet
768px
1vw = 7.68px
Laptop
1280px
1vw = 12.8px
Desktop
1440px
1vw = 14.4px
Fluid Typography with VW and Clamp
One of the most powerful uses of vw is creating text that smoothly scales between screen sizes without needing a dozen media queries. The modern way to do this is with CSS clamp(), which lets you set a minimum, a preferred (vw-based), and a maximum font size.
/* Fluid type scale using clamp() */
h1 {
font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem);
/* Min: 32px, Max: 56px, scales fluidly between */
}
h2 {
font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
}
p {
font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
/* Body text: 16px to 20px, very subtle scaling */
}
/* This replaces all of these media queries: */
/* @media (min-width: 768px) { h1 { font-size: 2.5rem; } } */
/* @media (min-width: 1024px) { h1 { font-size: 3rem; } } */
/* @media (min-width: 1440px) { h1 { font-size: 3.5rem; } } *//* Section padding that scales with screen */
.hero {
padding: clamp(3rem, 2rem + 5vw, 8rem) clamp(1rem, 5vw, 4rem);
/* Top/bottom: 48px to 128px */
/* Left/right: 16px to 64px */
}
/* Container max-width with fluid margin */
.container {
max-width: 75rem; /* 1200px */
margin-inline: max(1rem, calc((100vw - 75rem) / 2));
}/* Bad: text becomes unreadable on small screens */
h1 { font-size: 5vw; }
/* On 320px phone: 5vw = 16px (too small for heading) */
/* On 2560px monitor: 5vw = 128px (way too big) */
/* Good: clamp sets boundaries */
h1 { font-size: clamp(2rem, 5vw, 4rem); }
/* Never smaller than 32px, never bigger than 64px */VW vs Percentage: Which One to Use
The 100vw Scrollbar Problem
One of the most common issues developers run into with vw is the horizontal scrollbar. Setting an element to width: 100vw seems like it should make it exactly screen-wide, but 100vw actually includes the scrollbar width. On most desktop browsers, the scrollbar is about 15 to 17 pixels wide, so your element ends up wider than the visible area and creates an unwanted horizontal scroll.
The fix is simple: use width: 100% instead of 100vw when you want a full-width container. Reserve vw for things like fluid font sizes and spacing calculations where the small scrollbar difference does not matter.
If you absolutely need vw for width, you can use width: calc(100vw - var(--scrollbar-width)) where you calculate the scrollbar width with JavaScript. Or use the newer CSS property scrollbar-gutter: stable to reserve space for the scrollbar and prevent layout shifts.
Frequently Asked Questions
How do I convert px to vw?
Divide the pixel value by the viewport width, then multiply by 100. On a 1440px wide viewport, 144px becomes 144 / 1440 x 100 = 10vw.
What is 1vw in pixels?
1vw equals 1% of the viewport width. On a 1920px screen, 1vw = 19.2px. On a 1440px screen, 1vw = 14.4px. The pixel value changes as the browser window is resized.
When should I use vw units?
Use vw for fluid typography that scales with screen size, full-width hero sections, responsive padding that shrinks on small screens, and any layout that needs to be proportional to the browser window width.
What is the difference between vw and percent?
vw is relative to the browser viewport width. Percent is relative to the parent element width. A div at 50vw is always half the screen, but 50% is half of whatever container it sits inside.
Can I use vw for font size?
Yes, but pure vw fonts get too small on mobile and too large on desktop. Use clamp() for control: font-size: clamp(16px, 2.5vw, 32px) sets a minimum, preferred, and maximum size.
Does vw include the scrollbar?
Yes. On most browsers, 100vw includes the scrollbar width, which can cause a horizontal scroll. To avoid this, use 100% for full-width containers instead of 100vw, or subtract the scrollbar width.
What is the difference between vw and dvw?
vw is the initial viewport width. dvw (dynamic viewport width) accounts for browser UI changes on mobile, like the address bar showing or hiding. For most desktop layouts, they are identical.
How do I make text scale smoothly between breakpoints?
Use CSS clamp with vw: font-size: clamp(1rem, 1rem + 1vw, 2rem). This creates fluid typography that smoothly scales between a minimum and maximum size without needing media queries.
Can I combine vw with other units?
Yes. CSS calc() lets you mix units: width: calc(100vw - 2rem) gives you full viewport width minus some fixed padding. This is common for layouts that need a small fixed margin.
Is vw supported in all browsers?
Yes. Viewport units have been supported since 2013 in all major browsers including Chrome, Firefox, Safari, and Edge. Mobile browser support is also universal.
What viewport width should I use for conversion?
Common design widths are 1440px (desktop), 1280px (laptop), 768px (tablet), and 375px (mobile). Choose the width that matches your design file or your most common user screen size.
Why does my vw layout break on mobile?
Mobile browsers have dynamic toolbars that change the viewport size. Also, 100vw includes the scrollbar. Use dvw for mobile-aware viewport units, and avoid 100vw for width (use 100% instead).
Disclaimer: This tool provides approximate conversions for reference purposes. Results may vary slightly depending on browser rendering, root font size, and viewport settings. Always verify values in your specific development environment.