CSS clamp() 계산기

사용 방법

1. 최소 글꼴 크기(픽셀)와 최대 글꼴 크기(픽셀)를 입력하세요.
2. 최소 뷰포트 너비와 해당 글꼴 크기가 적용되는 최대 뷰포트 너비를 입력하세요.
3. 미리보기 슬라이더를 드래그하여 다양한 뷰포트 너비에서 글꼴이 어떻게 확장되는지 시뮬레이션하고 실시간 픽셀 값을 읽으세요.
4. 생성된 clamp() 표현식을 복사하여 CSS에 붙여넣으세요.

예제

• 최소 글꼴 16px, 최대 글꼴 32px, 최소 뷰포트 320px, 최대 뷰포트 1280px는 clamp(16px, 1.667vw + 10.667px, 32px)를 생성합니다.
• 800px 미리보기 뷰포트에서 라이브 디스플레이는 약 23px를 표시하여 두 극단 사이의 부드러운 확장을 확인합니다.