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

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

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

 

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

---

크게 3가지 기준에서 보면

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

 

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

 

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

 

이렇게 나뉘고,

---

자세하게 5가지 기준에서 보면

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

 

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

 

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

 

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

 

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

 

이런식으로 나뉩니다.

---

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

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