13.9.2 반응형 코드 작성하기

미디어 쿼리를 이용한 반응형 코드를 작성해 보겠습니다. 최종 프로젝트에서 font-size 속성이나 margin, padding 속성은 전부 rem 단위를 사용했습니다. rem 단위는 root, 즉 html 태그의 font-size 속성값에 영향을 받는 단위입니다. html 태그는 기본 font-size 속성값이 16px이므로 1rem이라면 16(px) × 1(rem) = 16px이 됩니다. 이러한 rem 단위의 특징을 이용해 반응형이 적용되는 뷰포트마다 기준이 되는 html 태그의 font-size 속성값을 작게 하면 화면 너비가 줄어들수록 전체 텍스트 크기와 내외부 여백이 일정 비율로 줄어듭니다.

@media screen and (max-width:992px){
  html{
    font-size:14px;
  }
}
@media screen and (max-width:768px){
  html{
    font-size:13px;
  }
}
@media screen and (max-width:576px){
  html{
    font-size:12px;
  }
}
@media screen and (max-width:400px){
  html{
    font-size:11px;
  }
}