1024px 기준 PX → VW 변환표
태블릿 시안 · iPad 가로·소형 노트북 너비로, 태블릿과 데스크톱의 경계 기준입니다. 아래 계산기로 바로 변환하거나 표에서 값을 찾아보세요.
시안(아트보드) 너비
px
vw
1024px 기준 px → vw 변환표
공식: vw = px ÷ 1024 × 100 · 1px = 0.0977vw · 1vw = 10.24px
| px | vw |
|---|---|
| 1px | 0.098vw |
| 2px | 0.195vw |
| 4px | 0.391vw |
| 6px | 0.586vw |
| 8px | 0.781vw |
| 10px | 0.977vw |
| 12px | 1.172vw |
| 13px | 1.27vw |
| 14px | 1.367vw |
| 15px | 1.465vw |
| 16px | 1.563vw |
| 17px | 1.66vw |
| 18px | 1.758vw |
| 20px | 1.953vw |
| 22px | 2.148vw |
| 24px | 2.344vw |
| 26px | 2.539vw |
| 28px | 2.734vw |
| px | vw |
|---|---|
| 30px | 2.93vw |
| 32px | 3.125vw |
| 36px | 3.516vw |
| 40px | 3.906vw |
| 44px | 4.297vw |
| 48px | 4.688vw |
| 50px | 4.883vw |
| 56px | 5.469vw |
| 60px | 5.859vw |
| 64px | 6.25vw |
| 72px | 7.031vw |
| 80px | 7.813vw |
| 90px | 8.789vw |
| 96px | 9.375vw |
| 100px | 9.766vw |
| 120px | 11.719vw |
| 140px | 13.672vw |
| 160px | 15.625vw |
| px | vw |
|---|---|
| 180px | 17.578vw |
| 200px | 19.531vw |
| 240px | 23.438vw |
| 280px | 27.344vw |
| 300px | 29.297vw |
| 320px | 31.25vw |
| 360px | 35.156vw |
| 400px | 39.063vw |
| 480px | 46.875vw |
| 500px | 48.828vw |
| 600px | 58.594vw |
| 640px | 62.5vw |
| 720px | 70.313vw |
| 800px | 78.125vw |
| 960px | 93.75vw |
| 1000px | 97.656vw |
| 1200px | 117.188vw |
CSS 일괄 변환
CSS를 붙여넣으면 모든 값이 바로 변환됩니다. @media 조건은 그대로 둡니다.
SCSS · CSS로 직접 계산하기
기준 너비가 반영된 함수입니다. 프로젝트에 붙여넣어 쓰세요.
SCSS
CSS
1024px 기준 vw → px 역변환표
| vw | px |
|---|---|
| 0.1vw | 1.02px |
| 0.25vw | 2.56px |
| 0.5vw | 5.12px |
| 0.75vw | 7.68px |
| 1vw | 10.24px |
| 1.25vw | 12.8px |
| 1.5vw | 15.36px |
| 2vw | 20.48px |
| 2.5vw | 25.6px |
| vw | px |
|---|---|
| 3vw | 30.72px |
| 4vw | 40.96px |
| 5vw | 51.2px |
| 6vw | 61.44px |
| 7.5vw | 76.8px |
| 8vw | 81.92px |
| 10vw | 102.4px |
| 12.5vw | 128px |
| vw | px |
|---|---|
| 15vw | 153.6px |
| 20vw | 204.8px |
| 25vw | 256px |
| 30vw | 307.2px |
| 40vw | 409.6px |
| 50vw | 512px |
| 75vw | 768px |
| 100vw | 1024px |
다른 화면에서는 어떻게 보일까?
1024px 시안에서 변환한 vw 값이 실제 화면 너비에 따라 몇 px로 보이는지 비교한 표입니다.
| 시안 값 | vw | 768px 화면 | 820px 화면 |
|---|---|---|---|
| 12px | 1.172vw | 9px | 9.6px |
| 14px | 1.367vw | 10.5px | 11.2px |
| 16px | 1.563vw | 12px | 12.8px |
| 20px | 1.953vw | 15px | 16px |
| 24px | 2.344vw | 18px | 19.2px |
| 32px | 3.125vw | 24px | 25.6px |
| 48px | 4.688vw | 36px | 38.4px |
| 64px | 6.25vw | 48px | 51.3px |
자주 묻는 질문
1024px 기준으로 16px는 몇 vw인가요?
(16 ÷ 1024) × 100 = 1.5625vw입니다. 소수점 둘째 자리까지 쓰면 1.56vw입니다.
1024px 기준 1vw는 몇 px인가요?
1024px 화면에서 1vw는 화면 너비의 1%인 10.24px입니다. 반대로 1px은 0.0977vw입니다.
1024px 시안을 vw로 바꾸면 다른 화면에서는 어떻게 보이나요?
vw는 화면 너비에 비례하므로, 1024px 시안의 16px(1.563vw)는 768px 화면에서 12px, 820px 화면에서 12.8px로 보입니다. 너무 작아지거나 커지지 않도록 clamp()로 최소·최대 크기를 함께 지정하는 것이 좋습니다.