CSS Clamp 생성기
로컬 처리반응형 clamp() 식 생성
사용 방법과 처리 기준
반응형 clamp() 식 생성
도구의 계산과 파일 처리는 브라우저 안에서 이루어집니다. 계산기·단위 변환의 공유 링크를 직접 만들면 값이 URL에 포함됩니다. 계정·방문 통계·광고 관련 정보 처리는 개인정보처리방침을 확인하세요.
현재 제한
- 최대 입력 길이 100,000자
모바일에서는 작게, 데스크톱에서는 크게 보이는 반응형 글자·여백을 미디어 쿼리 없이 한 줄로 만듭니다. 결과는 1rem = 16px 기준 rem으로 나옵니다.
이 도구로 할 수 있는 일
- 선형 보간
- 최소 폭에서 최소 크기, 최대 폭에서 최대 크기가 되도록 기울기를 계산합니다.
- rem 단위
- 사용자 글꼴 크기 설정을 존중하는 rem으로 씁니다.
CSS Clamp 생성기 사용 방법
- 1크기 입력최소·최대 크기(px)를 적습니다.
- 2화면 폭 입력적용할 최소·최대 화면 폭(px)을 적습니다.
- 3CSS 복사font-size 등에 붙여 씁니다.
활용 예시
16px → 32px (360~1280px)
입력: 16, 32 / 360, 1280
결과: clamp(1rem, 0.6087rem + 1.7391vw, 2rem)
이럴 때 유용해요
- 반응형 제목 글자 크기
- 화면 폭에 따라 커지는 여백·간격
자주 묻는 질문 (FAQ)
rem이 16px이 아니면요?
루트 글꼴 크기를 바꿨다면 결과의 rem 값도 그 비율로 달라집니다. 이 도구는 브라우저 기본값 16px을 기준으로 계산합니다.