반응형 UI 디자인의 미디어쿼리 분기점을 정리해 본다.
이걸 쓰는 이유는,
요즘 시대에 반응형 디자인은 기본이기 때문에
기억해 두어야 할 것으로 판단했으며 토이프로젝에 적용해 보기 위해서이다.
여러 글을 찾아보니 공통적으로 기준이 되는 부분이 있었다. 이를 기재코자 한다.
479px
480px
~ 767px
768px
~ 1023px
1024px
~/* 노트북 & 테블릿 가로 (해상도 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) {
//스타일 입력
}
767px
768px
~ 1023px
1024px
~