clamp() 속성을 이용하여 글꼴크기가 Container의 사이즈에 따라서 유동적으로 변하도록 할 수 있습니다.
clamp() 속성은 최소값, vw값, 최대값의 3가지 속성을 설정합니다.
media (max-width: )는 page-width 값을 참조하여 설정합니다.
/* media max-width는 page-width로 조정함 */
@media (max-width: 1300px) {
h1 {
font-size: clamp(24px, 4.31vw, 56px);
}
h2 {
font-size: clamp(22px, 3.46vw, 45px);
}
h3 {
font-size: clamp(20px, 2.77vw, 36px);
}
h4 {
font-size: clamp(18px, 2.31vw, 30px);
}
h5 {
font-size: clamp(16px, 1.85vw, 24px);
}
h6 {
font-size: clamp(14px, 1.54vw, 20px);
}
}
상기 설정에서 vw값은 아래 링크된 사이트에서 Viewport Width값과 px값을 입력하여 쉽게 구하실 수 있습니다.