반응형 작업과 mediaquery 최소화

 

순서에 맞춰 작성하기

보통 작은 화면 (모바일 등) 에서 큰 화면 (모니터 등) 순으로 작성한다.

/* Small device */
@media only screen and (max-width: 600px) {
    /* 스타일 작성*/
}

/* Medium device */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
    /* 스타일 작성 */
}

/* Large device */
@media only screen and (min-width: 1025px) {
    /* 스타일 작성 */
}

 

최소 너비 (min-width) 사용

@media only screen and (max-width: 600px) {
    /* 스타일 작성*/
}

@media only screen and (min-width: 601px) and (max-width: 1024px) {
    /* 스타일 작성*/
}

@media only screen and (min-width: 1025px) {
    /* 스타일 작성 */
}

 

공통된 미디어 쿼리로 스타일 공유

/* 공통 스타일 */
@media only screen and (max-width: 600px),
       only screen and (min-width: 601px) and (max-width: 1024px),
       only screen and (min-width: 1025px) {
    /* 스타일 작성*/
}

/* 나머지  스타일 추가 */
@media only screen and (max-width: 600px) {
    /* 추가 스타일 */
}

@media only screen and (min-width: 601px) and (max-width: 1024px) {
    /* 추가 스타일 */
}

@media only screen and (min-width: 1025px) {
    /* 추가 스타일 */
}