웹 디바이스별 반응형 분기점(break point) 정리

분기점(Break Point) 정리

이번에 팀, 개인 프로젝트에서 반응형 처리를 빈번히 하게 되면서 분기점에 대해 한 번 정리하고 넘어가면 좋을 것 같아서 블로그에 남겨본다.

각각의 범위는 일반적으로 자주 사용되는 범위일 뿐 절대적인 분기점은 아니라는 것을 참고하길 바란다.

type 1(해상도별로 분기하기)

• ~ 480px : Mobile 세로
• 481px ~ 768px : Mobile가로, Tablet 세로
• 769px ~ 1024px : Tablet 가로, 작은 노트북
  (또는 769px ~ 1280px 로 분기하기도 한다.)
• 1025px ~ 1439px: PC(중형 모니터: 대부분의 노트북, 모니터)
  (또는 1281px ~ )
• 1440px 이상 : PC(대형 모니터: 고해상도 모니터, iMac)

// 🖥 대형 모니터(1440px ~ )
// 기본 스타일 정의, 여기서는 1440px 이상을 의미한다.

// 🖥 중형 모니터(1080px ~ 1439px)
@media (max-width: 1439px) {
  // 스타일 입력 부분
}

// 💻 노트북 (769px ~ 1024px)
@media (max-width: 1024px) {
  // 스타일 입력 부분
}

// 📱 태블릿 (481px ~ 768px)
@media (max-width: 768px) {
  // 스타일 입력 부분
}

// 📱 모바일 (480px 이하)
@media (max-width: 480px) {
 // 스타일 입력 부분
}

내 프로젝트에서는 화면에 따라 컨텐츠를 중앙에 배치하고 적절한 양 옆 마진을 주기 위해 vw를 사용해서 화면에서 차지하는 비율에 따라 스타일을 주었는데, 그렇다 보니 자연스러운 디자인을 위해 최대한 모든 분기점을 나누어 주었다.

type 2(디바이스별로 분기하기)

프로젝트 특성별로 다르겠지만 보통은 아래와 같이 크게 세 부분으로 나누어 스타일링해도 크게 문제가 없었다. 전체적으로 세 가지 부분으로 나누어 스타일링 하고 UI에 따라 필요한 부분만 브레이크 포인트를 나누어 적절히 대응해주는 식으로 하면 될 듯하다.

// 🖥 데스크탑 모니터 (1025px ~ )
// 기본 스타일 정의

// 💻 노트북 (769px ~ 1024px)
@media (max-width: 1024px) {
  // 스타일 입력 부분
}

// 📱 모바일 & 태블릿 ( ~ 768px)
@media (max-width: 768px) {
  // 스타일 입력 부분
}

참고 사이트

🔗 브레이크 포인트 적용 사례 보러 가기 : https://bluemin-portfolio.vercel.app/

🔗 해상도와 디바이스 & 브라우저 트렌드를 볼 수 있는 사이트: https://gs.statcounter.com/screen-resolution-stats