[CSS] 미디어 쿼리 (반응형 모바일) 마스터하기

◾ 미디어 쿼리 (반응형 모바일)

1. @midia

→ @media screen and ()

@media screen and (max-width: 400px) {
  div {
    background-color: blue;
    width: 100px;
    height: 100px;
  }
}

@media screen and (min-width: 300px) and (max-width: 400px) {
  div {
    background-color: blue;
    width: 100px;
    height: 100px;
  }
}

@media screen and (orientation: landscape) {
  div {
    /* 가로 */
  }
}

@media screen and (orientation: portrait) {
  div {
    /* 세로 */
  }
}

 

→  min-device-width : 모바일에서만 적용

 

◾ 가로 사이즈마다 

body {
    color: blue;
}

/* 보통 휴대폰 사이즈 600px 이라고 함 */
@media (max-width:600px) {
    .cellphone {
        color: red
    }    
}

@media (min-width:600px) and (max-width:992px) {
    .tablet {
        color: green;
    }
}

@media (min-width:992px) {
    .desktop {
        color: gainsboro
    }
}

 

◾ 가로, 세로 모드 (휴대폰)

/* 가로가 더 길때 */
@media (orientation:landscape) {
    body {
        color: red;
        display: flex;
    }
}

/* 세로가 더 길때 */
@media (orientation:portrait) {
    body {
        color: orange;
        display: none;
    }
}

 

◾ 인쇄할 때

@media print {
    body {
        color: aqua;
    }
}