모바일 웹페이지 사이즈 - mobail webpeiji saijeu

해상도 및 브라우저 사용지표: http://gs.statcounter.com/

https://brunch.co.kr/@plusx/6

​

====================================================

PC

====================================================

1920 X 1080px (유저수 42%)

- 실제 사이즈 : 1904 X 975px

​

1366 X 768px (유저수 9%)

- 실제 사이즈 : 1350 X 683px

​

====================================================

모바일

====================================================

★ 안드로이드

360 X 640px (유저수 17.29%)

- 포토샵 작업 : 720 X 1280px (@2x)

안드로이드(360*640)를 먼저 작업하는 경우에는 안드로이드 기준으로 먼저 제작하고,

iOS(375*664)의 늘어난 여백(375-360=15)만큼 우측과 하단으로 늘려서 대응

​

720 x 1280 (웹)

720x1280px(@2x) (앱)

1080x1920px(@3x) (앱)

​

​

★ ISO

375 X 667px (유저수 7%)

- 포토샵 작업 : 아이폰6, 아이폰8 기준

750 X 1334px (@2x)

​

아이폰7 - 1125 X 2001(@3x) (앱)

아이폰 XS MAX - 1242 X 2688 (@3x) (앱)

​

- 포토샵작업 : 아이폰X 기준

1125 X 2436px (@3x)

​

▶ 모바일 양쪽마진 (1x 기준) - 8의 배수 사용

- 16 / 20 / 24

​

★ 모바일 psd 사이즈 기준

​

앱디자인 가이드

http://devstory.ibksplatform.com/2017/09/blog-post_25.html

​

★ 태블릿 가로 사이즈 기준

- 1024X768 화면사이즈 기준 (갤럭시 탭S3)

- 포토샵 작업 : 갤럭시 탭S3 기준

2048px X 1536px(@2x)

​

====================================================

반응형 웹 대응

====================================================

▶ 720, 1024, 1334, 1600 네 가지 분기 처리(Breakpoint)를 기본

360 / 640 / 720 / 1024 / 1334 / 1600 / 1920

​

- PC

@media all and (max-width:1500px) {}

@media all and (max-width:1280px) {}

@media all and (max-width:1180px) {}

- 태블릿, 모바일

@media all and (max-width:981px) {}

@media all and (max-width:768px) {}

@media all and (max-width:640px) {}

​

반응형 웹 화면사이즈 대응 그리드

https://spec.fm/specifics/8-pt-grid

==================================

​

무료 psd

https://kr.365psd.com/

​

​

​