CSS Clamp Generator
최소값, 기본값(유동값), 최대값을 설정하여 반응형 폰트 크기,
간격, 너비를 계산해 주는 도구입니다.
복잡한 수식 없이 뷰포트 크기에 따라 유동적으로 변하는 CSS 코드를
즉시 생성하세요.
📏 Viewport Range
px
px
📐 Size Range
px
px
clamp(1rem, 0.5rem + 1.5vw, 2rem)
✨ Live Preview
브라우저 너비를 조절하며 텍스트 크기 변화를 확인하세요
가나다라마바사 아자차카타파하
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
📖 사용 방법
- Viewport Range: 가변적인 변화가 일어날 화면 너비의 범위를 설정합니다. (모바일 ~ PC 범위)
- Size Range: 해당 뷰포트 범위 내에서 변화할 요소(폰트 등)의 크기 범위를 입력합니다.
-
Generated Code: 입력 즉시 미디어 쿼리
없이도 화면 크기에 맞춰 부드럽게 변하는
clamp()코드가 생성됩니다. -
생성된 코드를 복사하여
font-size,padding등에 적용해 보세요!