Media Query

자꾸 까먹는 Media Query 정리하기

Base font size

body가 아니라 html에 작성할 것

  html {
    /* 10px = 1rem */
    font-size: 62.5%; 

    @media (max-width: 992px) {
      /* 9px = 1rem */
      font-size: 56.25%; 
    }

    @media (max-width: 768px) {
      /* 8px = 1rem */
      font-size: 50%; 
    }

    @media (max-width: 576px) {
      /* 7px = 1rem */
      font-size: 43.75%; 
    }

    @media (max-width: 320px) {
      /* 5.5px = 1rem */
      font-size: 37%;
    }
  }

• base font size(html)을 작성하려면 미디어 쿼리에서 px 사용
• @media (max-width: 36rem) (X)
• vw사용하기
• 나머지 값은 rem 사용하기 (width, img등)

Media Query Order

css style 충돌시 항상 위에서 아래로 적용됨

@media (max-width: 600px) {
  body {
    background: red;
  }
}

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

landscape and portrait

@media (orientation: portrait) and (max-width: 400px) {...}
@media (orientation: landscape) and (max-width: 400px) {...} 

/* or */

@media (max-width:320px){...} /*Portrait */
@media (min-width: 321px) and (max-width: 480px) {...} /* Landscape */