media query와 단위

.box {
  width : 16px; /* 기본 px 단위 */
  width : 1.5rem; /* html태그(기본 16px) 혹은 기본 폰트사이즈의 1.5배 */
  width : 2em; /* 내 폰트사이즈 혹은 상위요소 폰트사이즈의 2배 */
  width : 50vw; /* 브라우저(viewport) 화면 폭의 50% */
  width : 50vh; /* 브라우저(viewport) 화면 높이의 50% */
}

웹에서 사용하는 단위들이다.

rem단위는 보통 전체 글꼴 크기를 키울 때 다른 레이아웃이 비율로 같이 커지게 하기 위해서 사용한다.

 

그리고 모바일에서도 반응형 레이아웃을 만들려면

<meta name="viewport" content="width=device-width, initial-scale=1.0">

이 들어가 있어야 한다.

 

본격적으로, media query에 대해 알아보자.

@media screen and (max-width : 1200px) { 
  .box { 
    font-size : 40px; 
  } 
}

위와 같이 사용하며, 1200px 이하일 경우 저 class를 적용하는 것이다. 

보통 브라우드 폭은 1200px 밑은 태블릿, 768px 밑은 모바일이 간편하다.