본문 바로가기
> 메모/CSS

[CSS] 반응형 폰트 크기 지정하기

by 자몽주스 2024. 8. 1.
728x90

반응형 폰트 크기: 뷰포트 크기에 따라 폰트 크기를 조절하고 싶다면

vw를 사용하거나 clamp()를 활용하여 최소 및 최대 크기를 설정

body {
    font-size: clamp(1rem, 2vw, 2rem);
}
  • 1rem: 최소 폰트 크기
  • 2vw: 뷰포트 너비의 2%에 해당하는 기본 폰트 크기
  • 2rem: 최대 폰트 크기

이렇게 설정하면 뷰포트 크기에 따라 폰트 크기가 조절되지만,
최소 크기와 최대 크기를 설정하여 폰트가 너무 작아지거나 커지는 것을 방지할 수 있습니다.

728x90