[CSS] 반응형 디자인을 위한 기기별 화면 크기

1. PC (데스크탑)

• 평균 너비: 1280px ~ 1920px
• 평균 높이: 800px ~ 1080px
• 화면 비율은 대부분 16:9나 16:10을 따릅니다.

2. 태블릿

• 평균 너비: 768px ~ 1024px
• 평균 높이: 1024px ~ 1366px
• 태블릿은 가로/세로 모드 모두 고려해야 하며, 가로 모드에서 반응형이 어떻게 보이는지도 중요합니다.

3. 휴대폰 (스마트폰)

• 평균 너비: 360px ~ 414px
• 평균 높이: 640px ~ 896px
• 최근 스마트폰은 5인치 이상의 대화면이 많아졌지만, 360px ~ 414px 정도의 너비가 여전히 많이 사용됩니다. 높이는 기기마다 다양하지만 세로 길이는 평균적으로 640px 이상입니다.

미디어 쿼리 사용 시 대략적인 기준

1. PC: 너비 1024px 이상
2. 태블릿: 너비 768px ~ 1023px
3. 휴대폰: 너비 767px 이하