Media Query

Suyeon·2020년 11월 5일
0

Css

목록 보기
2/3

자꾸 까먹는 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 */
profile
Hello World.

0개의 댓글