320px to VW Conversion Table
Mobile design · The smallest mobile width still worth supporting, such as the original iPhone SE. Convert live with the calculator below or look values up in the table.
px → vw table for a 320px base
Formula: vw = px ÷ 320 × 100 · 1px = 0.3125vw · 1vw = 3.2px
| px | vw |
|---|---|
| 1px | 0.313vw |
| 2px | 0.625vw |
| 4px | 1.25vw |
| 6px | 1.875vw |
| 8px | 2.5vw |
| 10px | 3.125vw |
| 12px | 3.75vw |
| 13px | 4.063vw |
| 14px | 4.375vw |
| 15px | 4.688vw |
| 16px | 5vw |
| 17px | 5.313vw |
| 18px | 5.625vw |
| 20px | 6.25vw |
| 22px | 6.875vw |
| 24px | 7.5vw |
| 26px | 8.125vw |
| 28px | 8.75vw |
| px | vw |
|---|---|
| 30px | 9.375vw |
| 32px | 10vw |
| 36px | 11.25vw |
| 40px | 12.5vw |
| 44px | 13.75vw |
| 48px | 15vw |
| 50px | 15.625vw |
| 56px | 17.5vw |
| 60px | 18.75vw |
| 64px | 20vw |
| 72px | 22.5vw |
| 80px | 25vw |
| 90px | 28.125vw |
| 96px | 30vw |
| 100px | 31.25vw |
| 120px | 37.5vw |
| 140px | 43.75vw |
| 160px | 50vw |
| px | vw |
|---|---|
| 180px | 56.25vw |
| 200px | 62.5vw |
| 240px | 75vw |
| 280px | 87.5vw |
| 300px | 93.75vw |
| 320px | 100vw |
| 360px | 112.5vw |
| 400px | 125vw |
| 480px | 150vw |
| 500px | 156.25vw |
| 600px | 187.5vw |
| 640px | 200vw |
| 720px | 225vw |
| 800px | 250vw |
| 960px | 300vw |
| 1000px | 312.5vw |
| 1200px | 375vw |
Batch CSS converter
Paste CSS and every value converts instantly. @media conditions are left untouched.
Calculate in SCSS or CSS
Functions with your base width baked in. Paste them into your project.
SCSS
CSS
vw → px table for a 320px base
| vw | px |
|---|---|
| 0.1vw | 0.32px |
| 0.25vw | 0.8px |
| 0.5vw | 1.6px |
| 0.75vw | 2.4px |
| 1vw | 3.2px |
| 1.25vw | 4px |
| 1.5vw | 4.8px |
| 2vw | 6.4px |
| 2.5vw | 8px |
| vw | px |
|---|---|
| 3vw | 9.6px |
| 4vw | 12.8px |
| 5vw | 16px |
| 6vw | 19.2px |
| 7.5vw | 24px |
| 8vw | 25.6px |
| 10vw | 32px |
| 12.5vw | 40px |
| vw | px |
|---|---|
| 15vw | 48px |
| 20vw | 64px |
| 25vw | 80px |
| 30vw | 96px |
| 40vw | 128px |
| 50vw | 160px |
| 75vw | 240px |
| 100vw | 320px |
How does it look on other screens?
What the vw values from a 320px design render as, in px, on other viewport widths.
| Design value | vw | 360px screen | 390px screen | 430px screen |
|---|---|---|---|---|
| 12px | 3.75vw | 13.5px | 14.6px | 16.1px |
| 14px | 4.375vw | 15.8px | 17.1px | 18.8px |
| 16px | 5vw | 18px | 19.5px | 21.5px |
| 20px | 6.25vw | 22.5px | 24.4px | 26.9px |
| 24px | 7.5vw | 27px | 29.3px | 32.3px |
| 32px | 10vw | 36px | 39px | 43px |
| 48px | 15vw | 54px | 58.5px | 64.5px |
| 64px | 20vw | 72px | 78px | 86px |
Frequently asked questions
How many vw is 16px on a 320px base?
(16 ÷ 320) × 100 = 5vw. Rounded to two decimals that is 5vw.
How many px is 1vw on a 320px screen?
On a 320px-wide screen 1vw is 1% of the width, i.e. 3.2px. Conversely, 1px is 0.3125vw.
What happens to a 320px design converted to vw on other screens?
vw scales with the viewport width, so 16px (5vw) from a 320px design renders as 18px on a 360px screen, 19.5px on a 390px screen, 21.5px on a 430px screen. Use clamp() to set minimum and maximum sizes so values never get too small or too large.