[CSS] em,vw 단위 최소 글자크기 설정하는 방법

반응형 폰트 사이즈 em과 vw를 사용하면서 최소로 페이지를 줄여버릴때, 제일 작은 폰트사이즈는 이정도로 했으면 좋겠다 싶을 때가 있습니다. 그 방법을 정리해봅니다.

em

em은 부모요소의 폰트사이즈를 기반으로 표현한 측정 단위입니다.

body {
  font-size: 16px;
}

p {
  font-size: calc(1em + 12px);
}

body의 폰트사이즈가 16px일때, 그 안에 속해있는 p태그가 있다고 가정합니다.

그렇게 되면 부모 요소인 body로 인해 1em사이즈가 16px일것이고 여기에 +12px가 되서 p태그의 폰트사이즈는 28px이 됩니다.

p태그는 절대 28px 아래로 떨어지지 않게 됩니다.

 

vw

VW는 뷰포인트 width 너비의 퍼센테이지를 부여해서 표현한 측정단위입니다.

body {
  font-size: calc(1vw + 12px);
}

body태그는 뷰포인트 너비의 1%로 측정된 값에 12px이 더해진 값으로 설정됩니다.

뷰포인트 크기에 관계없이 폰트 사이즈가 12px 아래로 떨어지지 않게 됩니다.

 

 

▼ 폰트 사이즈 단위에 대해서 간단하게 정리된 내용은 아래 포스팅을 참고하세요!

 

[css] 폰트 사이즈 단위에 대하여 간단정리(em,vw,vh,px,rem)