320px 기준 PX → VW 변환표
모바일 시안 · 가장 작은 모바일 화면(구형 iPhone SE 등)까지 대응할 때 쓰는 최소 기준입니다. 아래 계산기로 바로 변환하거나 표에서 값을 찾아보세요.
시안(아트보드) 너비
px
vw
320px 기준 px → vw 변환표
공식: 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 |
CSS 일괄 변환
CSS를 붙여넣으면 모든 값이 바로 변환됩니다. @media 조건은 그대로 둡니다.
SCSS · CSS로 직접 계산하기
기준 너비가 반영된 함수입니다. 프로젝트에 붙여넣어 쓰세요.
SCSS
CSS
320px 기준 vw → px 역변환표
| 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 |
다른 화면에서는 어떻게 보일까?
320px 시안에서 변환한 vw 값이 실제 화면 너비에 따라 몇 px로 보이는지 비교한 표입니다.
| 시안 값 | vw | 360px 화면 | 390px 화면 | 430px 화면 |
|---|---|---|---|---|
| 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 |
자주 묻는 질문
320px 기준으로 16px는 몇 vw인가요?
(16 ÷ 320) × 100 = 5vw입니다. 소수점 둘째 자리까지 쓰면 5vw입니다.
320px 기준 1vw는 몇 px인가요?
320px 화면에서 1vw는 화면 너비의 1%인 3.2px입니다. 반대로 1px은 0.3125vw입니다.
320px 시안을 vw로 바꾸면 다른 화면에서는 어떻게 보이나요?
vw는 화면 너비에 비례하므로, 320px 시안의 16px(5vw)는 360px 화면에서 18px, 390px 화면에서 19.5px, 430px 화면에서 21.5px로 보입니다. 너무 작아지거나 커지지 않도록 clamp()로 최소·최대 크기를 함께 지정하는 것이 좋습니다.