📐
무료 Pixel과 REM 변환기
구성 가능한 기본 글꼴 크기로 px, rem, em, pt, vw, vh, % 간에 변환합니다. 일반적인 픽셀 크기에 대한 참조 표를 포함합니다.
한 번 로드하면 오프라인에서도 작동
1rem
컨텍스트 (rem/em/vw/vh/% 에 영향)
16 px의 모든 변환
가장 가까운 Tailwind 토큰(16px 루트에서)
일반적인 픽셀 크기 → rem (16px 기준)
붙여넣은 CSS 변환
주요 용도
- 웹 개발용 PX에서 REM로확장 가능하고 접근 가능한 CSS의 경우 픽셀 값을 rem 단위로 변환합니다. 기본 글꼴 크기를 설정하고 모든 동등한 값을 즉시 확인합니다.
- 반응형 설계용 CSS 단위px, vw, vh 및 % 사이를 변환하여 다양한 화면 크기 및 방향에 올바르게 반응하는 레이아웃을 구축합니다.
- 설계 사양을 CSS 단위로 변환Figma 또는 Sketch 픽셀 값을 rem/em 단위로 변역하여 깨끗하고 확장 가능한 CSS 구현을 수행합니다.
- Tailwind CSS 단위 참조정확한 구현을 위해 Tailwind CSS 크기 클래스가 픽셀 및 rem 값에 어떻게 매핑되는지 이해합니다.
- 인쇄 스타일시트에 대한 CSS 단위 변환인쇄 미디어 쿼리 및 PDF 출력 CSS의 경우 px, pt 및 rem 사이를 변환합니다.
사용 방법
모든 변환은 의존성 없는 직접 작성한 산술 엔진으로 전적으로 브라우저에서 실행됩니다. 도구는 모든 계산을 공통 기준인 픽셀을 거쳐 처리하며, 설정한 루트 글꼴 크기, 부모 글꼴 크기, 뷰포트 크기에 대한 간단한 나눗셈이나 곱셈으로 일곱 가지 CSS 단위(px, rem, em, pt, vw, vh, %) 사이를 변환합니다.
- 1기준값 설정변환 전에 상대 CSS 단위를 의미 있게 만드는 네 숫자를 설정합니다: 루트 글꼴 크기(기본 16px, 브라우저 기본값), 부모 요소 글꼴 크기(em과 % 변환용), 뷰포트 너비와 높이(vw와 vh용). 브라우저가 실행 시 CSS를 해석할 때 사용하는 것과 같은 값입니다.
- 2공통 중간 단위로서의 픽셀변환기는 먼저 toPixels()를 호출해 입력을 원시 픽셀 수로 정규화합니다. 예를 들어 1.5rem은 1.5 × baseFontPx가 되고 50vw는 0.5 × vpWidth가 됩니다. 그런 다음 fromPixels()가 그 픽셀 수를 목표 단위에 맞는 계수로 나눕니다. 일곱 단위 모두 변환표에 동시에 표시됩니다.
- 3가장 가까운 Tailwind 토큰 조회변환 후 도구는 rem 값을 계산하고 하드코딩된 두 조회표(Tailwind의 글꼴 크기 토큰 13개(text-xs부터 text-9xl까지)와 간격 척도)를 훑어 절대 거리로 가장 가까운 값을 찾습니다. = 기호는 값이 정확한 토큰이라는 뜻이고, ≈는 가장 가까운 근사값이라는 뜻입니다.
- 4정규식으로 CSS 일괄 변환CSS 붙여넣기 패널은 원시 CSS 텍스트를 받아 정규식 치환을 적용합니다. px→rem 모드에서는 모든 px 토큰을 찾아 숫자 부분을 value/baseFontPx + rem으로 바꾸고, rem→px 모드에서는 반대로 합니다. 치환 횟수가 표시되어 몇 개의 값이 바뀌었는지 확인할 수 있습니다.