반응형 페이지 작업할 때, 분기점 순서 설정하는 법

반응형(responsive) 페이지 작업할 때, css에서 미디어 쿼리(media query) 분기점(breakpoint) 작성 순서입니다

분기점은 해당 프로젝트에 맞게 설정하시면 됩니다

 

Mobile First

작은 너비 순으로 시작

@media screen and (min-width: 768px) {
  /* 768px 이상 */
}
@media screen and (min-width: 1024px) {
  /* 1024px 이상 */
}

 

Desktop First

넓은 너비 순으로 시작

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