모바일 작업사이즈, 폰트, 사이즈 % 비율법

 

 

 

작업사이즈 해상도

 

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 값 = 배율

LDPI (120dpi)	MDPI (160dpi)	HDPI (240dpi)	XHDPI (320dpi)	XXHDPI (480dpi)	XXXHDPI (640dpi)
0.75px	1px	1.5px	2px	3px	4px

​

---

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

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

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

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

Points	Pixels	Ems	Percent
6pt	8px	0.5em	50%
7pt	9px	0.55em	55%
7.5pt	10px	0.625em	62.5%
8pt	11px	0.7em	70%
9pt	12px	0.75em	75%
10pt	13px	0.8em	80%
10.5pt	14px	0.875em	87.5%
11pt	15px	0.95em	95%
12pt	16px	1em	100%
13pt	17px	1.05em	105%
13.5pt	18px	1.125em	112.5%
14pt	19px	1.2em	120%
14.5pt	20px	1.25em	125%
15pt	21px	1.3em	130%
16pt	22px	1.4em	140%
17pt	23px	1.45em	145%
18pt	24px	1.5em	150%
20pt	26px	1.6em	160%
22pt	29px	1.8em	180%
24pt	32px	2em	200%
26pt	35px	2.2em	220%
27pt	36px	2.25em	225%
28pt	37px	2.3em	230%
29pt	38px	2.35em	235%
30pt	40px	2.45em	245%
32pt	42px	2.55em	255%
34pt	45px	2.75em	275%
36pt	48px	3em	300%

사이즈 계산사이트 : 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...% */