(반응형 디자인) pc 데스크탑, 태블릿, 모바일 화면 크기 디자인 기준

2020. 4. 8.

by. kimyang-Sun

반응형이나 적응형등 pc 뿐만이 아닌 다른 기기들의 디자인을 위해서 화면 크기 해상도 디자인의 기준을 어느정도

숙지하고 있어야 상황에 따라 디자인이나 코딩을 할 수 있을 것 같아서 기록해둡니다.

pc, 태블릿, 모바일 보통은 이렇게 크게 3가지로 나뉘며

크게 3가지 기준에서 보면

pc 데스크탑 = 1920px ~ 1280px or 1025px 까지도 허용 (보통 해당 사이트 컨텐츠 영역의 너비로 보면 됩니다.)

태블릿 = 1280px or 1025px (해당 사이트 컨텐츠 영역) ~ 768px

모바일 = 767px ~ 320px or 꼭 최대 너비가 767이 아니더라도 상황에 따라 640px 이나 500px 등으로 설정하면 됩니다.

이렇게 나뉘고,

pc 데스크탑 = 1920px ~ 1280px or 1025px 까지도 허용 (보통 해당 사이트 컨텐츠 영역의 너비로 보면 됩니다.)

랜탑, 태블릿 = 1025px ~ 1280px

태블릿, 아이패드 = 1024px ~ 768px

저해상도 태블릿, 모바일(가로) = 767px ~ 480px

일반적인 모바일 = 479px ~ 320px

이런식으로 나뉩니다.

꼭 정해져 있는 기준은 아니니까 기준으로 알아두면서 상황에 따라 적당한 크기로 디자인하면 될 듯 합니다.

저는 코딩을 하는 입장으로 해당 값을 알고있으면 반응형 작업을 할 때 도움이 되기에 숙지해두고 있습니다. :)

맨 위로