개발자 도구px vw rem 변환

px vw rem 변환기반응형 clamp() 글자 크기 생성기

시안의 px 값을 화면 폭 기준 vw 와 rem 으로 바꾸고, 화면 폭에 따라 자연스럽게 커지는 CSS clamp() 한 줄을 만들어 주는 온라인 변환기입니다. 기기별 실제 크기를 표와 미리보기로 확인할 수 있습니다.

px vw rem 변환 사용법

시안의 px 값을 vw·rem 으로 바꾸고, 화면 폭에 따라 매끄럽게 커지는 clamp() 를 만듭니다. 반응형 글자 크기와 여백을 잡을 때 씁니다.

  1. 기준 폭을 정합니다

    시안이 1440px 이면 1440 을 넣습니다. 그 폭에서 24px 은 1.6667vw 가 됩니다.

  2. clamp() 범위를 정합니다

    작은 화면에서의 크기와 큰 화면에서의 크기, 커지기 시작하는 폭과 멈추는 폭을 넣으면 그 사이를 직선으로 잇는 식이 나옵니다.

  3. 미리보기로 확인합니다

    막대를 움직여 화면 폭마다 실제 크기를 보고, 기기별 표로 한눈에 비교합니다.

자주 묻는 질문

vw 만 쓰면 안 되나요?
글자 크기를 vw 로만 정하면 사용자가 브라우저 설정에서 글자를 키워도 커지지 않습니다. rem 을 섞으면 확대가 반영돼 접근성 기준을 지킬 수 있습니다.
clamp() 는 어느 브라우저에서 되나요?
2020년 이후의 크롬·사파리·파이어폭스·엣지에서 모두 동작합니다. IE 는 지원하지 않습니다.

개발자 도구 다른 도구