개요

반응형 UI 디자인의 미디어쿼리 분기점을 정리해 본다.

이걸 쓰는 이유는,

요즘 시대에 반응형 디자인은 기본이기 때문에

기억해 두어야 할 것으로 판단했으며 토이프로젝에 적용해 보기 위해서이다.

여러 글을 찾아보니 공통적으로 기준이 되는 부분이 있었다. 이를 기재코자 한다.

기준 (4단계형)

/* 노트북 & 테블릿 가로 (해상도 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) {
  //스타일 입력
}

기준 (3단계형)