모바일 웹 픽셀 - mobail web pigsel

작업사이즈 해상도

PC 웹 -> 1920×2560

1024 -> 본문사이즈 960

1280 -> 본문사이즈 1140

본문사이즈 : 960 / 1100 / 1140 / 1280

참고 : https://inmoon99.tistory.com/34

​

모바일 안드로이드

- hdpi : 480×800

- xhdpi : 720×1280(2x 시안작업)

- xxhdpi : 1080×1920

​

모바일 아이폰

- 아이폰4 : 640×960

- 아이폰5 : 640×1136

- 아이폰6, 아이폰8 : 750×1344 (2x 앱 시안작업)

- 아이폰6+, 아이폰8+ : 1242×2208

- iPhone Xr : 828 x 1792

- iPhone Xs : 1125 x 2436 (3x 앱 시안작업)

- iPhone Xs Max : 1242 x 2688

​

해상도사이트 : http://iosres.com

​

모바일앱 기본 단위

안드로이드 : DP(density independent pixels)

IOS : PT (point)

참고 : https://brunch.co.kr/@eeasily/17

https://material.io/resources/devices/

​

dpi,dp 변환식

px = dp × (dpi/160)

dp = px * (160/dpi)

160 dpi 화면기준 1 픽셀 = 1 dp

​

- 1 dp 값 = 배율

​

폰트사이즈 계산방법 (%)

브라우저 기본값 1em = 16px(body 지정된 사리즈)

- em계산법 : 12(사용하고 싶은 px) / 16(기준크기 px) = 0.75em

- %변환 : 12(사용하고 싶은 px) / 16(기준크기 px) × 100 = 75%

사이즈 계산사이트 : http://pxtoem.com/

​

이미지사이즈 계산법 (%)

내가 원하는 크기 또는 여백(20px) × 디바이스크기 또는 디자인크기(640px)

20px / 640px × 100 = 3.125%

​

박스사이즈 계산법 (%)

박스 가로너비 960px, 가변크기로 만들 박스 가로너비 300px

(300px / 960px) × 100 = 32.25%

​

상단높이 계산법 (%)

높이 ÷ 폭 × 100

padding-top: 66.666%; /* 500px÷750px×100=66.666...% */