CSS clamp() 생성기
뷰포트 범위와 최소·최대 크기를 입력하면 미디어쿼리 없이 반응하는 clamp() 값을 만들어 줍니다.
결과
clamp(...)미리보기 — 브라우저 창 크기를 바꿔보세요
다람쥐 헌 쳇바퀴에 타고파 — The quick brown fox 0123
사용법
네 개의 값을 정합니다. 최소 뷰포트와 최대 뷰포트는 크기가 변하기 시작하고 멈추는 화면 너비이고, 최소 크기와최대 크기는 그 두 지점에서의 값입니다. 예를 들어 화면 360px에서 16px, 1280px에서 24px로 두면, 그 사이에서는 글자 크기가 화면 너비에 비례해 부드럽게 커집니다. 중단점(media query)은 필요 없습니다.
생성되는 값의 가운데 항(선호값)에는 vw와 rem이 함께 들어갑니다. rem을 빼고 vw만 쓰면 사용자가 브라우저 확대를 해도 글자가 커지지 않아 접근성 문제가 생기기 때문입니다. 결과를 font-size, margin, padding,gap 등 길이가 필요한 어느 속성에나 그대로 붙여 쓸 수 있습니다.
최소·최대 크기가 같으면 변화가 없으니 두 값은 다르게 두세요. 최소 뷰포트가 최대 뷰포트보다 크면 계산이 뒤집히므로 입력 순서도 확인하시고요.