반응형 웹 font-size 적용하기

--> 1. 미디어쿼리 (media-queries)

/* Default */
body {
  font-size: 16px;
}
/* Smaller  */
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}
/* Larger  */
@media (min-width: 1200px) {
  body {
    font-size: 20px;
  }
}   

--> 2. calc() function

💡 미디어 쿼리보다 코드를 짧게 쓸 수 있다.

/* 10px 에서 시작해서 화면대비 2%씩 커진다 */
body {
  font-size: calc(10px + 2vw);
}    

✏️   참고
https://www.linkedin.com/advice/3/how-can-you-scale-fonts-your-website-skills-html