웹 디바이스 별 해상도 반응형 분기점

반응형 웹을 만든 프로젝트가 여럿 있어 반응형 분기점에 대해 정리해 보았다. 각각의 범위는 일반적일 뿐이지 절대적인 것은 아니다.

일반적인 Breakpoint

• ~ 480px : Mobile세로
• 481px ~ 768px : Mobile가로, Tablet 세로
• 769px ~ 1024px 또는 1280px : Tablet 가로, 노트북
• 1025px 및 1281px ~ : PC

/* 노트북 & 테블릿 가로 (해상도 1024px ~ 1279px)*/
@media all and (min-width:1024px) and (max-width:1279px) { 
  스타일 입력
}

/* 테블릿 가로 (해상도 768px ~ 1023px)*/
@media all and (min-width:768px) and (max-width:1023px) { 
  스타일 입력
}

/* 모바일 가로 & 테블릿 세로 (해상도 480px ~ 767px)*/
@media all and (min-width:480px) and (max-width:767px) {
  스타일 입력
}

/* 모바일 세로 (해상도 ~ 479px)*/
@media all and (max-width:479px) {
  스타일 입력
}

 

자주 쓴 Breakpoint

• ~767px : Mobile
• ~ 1023px : Tablet
• 1024px ~ : PC

개인적으로 PC 사이즈에 맞춘 다음에 모바일 사이즈에서 UI 가 틀어지는 특정 부분만 모바일 사이즈에 맞추고 tablet 사이즈 기준으로 tablet과 mobile에서 동일한 UI가 보이게 했다.

@media screen and (max-width: 767px) {
  /** Mobile */
}

@media all and (min-width: 768px) and (max-width: 1023px) {
  /** Tablet  */
}

@media all and (max-width: 1023px) {
  /** Mobile & Tablet  */
}

 

해상도 트랜드

사용자들이 가장 많이 쓰는 해상도들이 무엇인지 알려주는 사이트도 있다.

Statcounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share