📐
무료 CSS clamp() 생성기
반응형 타이포그래피와 간격을 위한 유동적인 CSS clamp() 값을 생성합니다. 최소/최대 크기와 뷰포트 범위를 설정하고, 라이브 미리보기와 한 줄 CSS를 복사합니다.
한 번 로드하면 오프라인에서도 작동
출력 단위:
CSS 값
font-size: clamp(1rem, 1.5023vw + 0.6479rem, 2rem);
Tailwind 클래스
text-[clamp(1rem,1.5023vw_+_0.6479rem,2rem)]
768px 너비 → 21.9px
Aa 22px
뷰포트별 렌더링 크기
375px 너비Aa 16px
908px 너비Aa 24px
1440px 너비Aa 32px
clamp(min, preferred, max)는 뷰포트에 따라 값을 유동적으로 조정하고 최솟값과 최댓값에서 고정됩니다. 타이포그래피, 간격, 너비에 대한 미디어 쿼리를 한 줄로 대체합니다.
주요 용도
- 유동 반응형 타이포그래피 만들기한 줄로 모바일과 데스크톱 간에 글꼴 크기를 부드럽게 조정합니다.
- 유동 여백 및 패딩섹션 간격이 중단점에서 점프하는 대신 뷰포트로 증가하도록 합니다.
- clamp()로 미디어 쿼리 바꾸기중단점 오버라이드 스택을 단일 유동 값으로 축소합니다.
- 유동 유형 척도 빌드디자인 시스템 타입 척도를 위한 일관된 clamp() 단계를 생성합니다.
- 유동 영웅 및 디스플레이 제목큰 랜딩 페이지 제목이 극적으로 하지만 안전하게 확대되도록 합니다.
사용 방법
이 도구는 직접 작성한 선형 보간 공식으로 CSS clamp() 값을 계산합니다. 라이브러리도 서버 왕복도 없습니다. 두 크기와 두 뷰포트 너비를 입력하면 브라우저에서 즉시 계산되어, 두 중단점 사이에서 글자나 간격을 부드럽게 조절하는 vw 기반 선호 값을 가진 clamp() 표현식을 바로 붙여 넣을 수 있게 만듭니다.
- 1선형 기울기 계산도구는 픽셀당 기울기 (maxSize - minSize) / (maxViewport - minViewport)를 계산합니다. 이 기울기에 100을 곱해 vw 단위로 변환하며, 이것이 CSS 뷰포트 상대 크기 조정의 핵심입니다.
- 2절편 도출선형 함수가 최소 뷰포트에서 정확히 최소 크기가 되도록 절편 오프셋(px 또는 rem)을 계산합니다. 기울기와 절편이 함께 clamp() 안의 선호 값, 즉 실제로 크기가 변하는 부분을 이룹니다.
- 3단위 변환과 출력 형식rem 출력을 선택하면 모든 픽셀 값을 clamp() 문자열에 쓰기 전에 설정한 루트 글꼴 크기(기본 16px)로 나눕니다. Tailwind 구문에 맞춰 공백을 밑줄로 바꾼 Tailwind 임의 값 클래스도 함께 생성됩니다.
- 4실시간 뷰포트 슬라이더 미리보기범위 슬라이더로 320px부터 1920px 너비까지 이동할 수 있습니다. 각 위치에서 같은 기울기·절편 공식으로 제한된 크기를 실시간으로 계산하고 그 픽셀 크기로 샘플 텍스트를 렌더링하므로, 복사하기 전에 크기 변화 방식을 확인할 수 있습니다.