PX를 REM으로 변환하는 계산기

기준 글꼴 크기를 이용해 CSS 픽셀과 rem을 변환하세요.

공식 화면 & 디자인

REM

1rem은 루트 html 요소의 글꼴 크기와 같으며, 브라우저 기본값은 16px입니다. 픽셀 값을 기준 크기로 나누면 rem이고, rem에 기준 크기를 곱하면 픽셀입니다.

em도 같은 방식이지만 부모 요소의 글꼴 크기를 기준으로 하므로, 부모가 기준 크기를 쓸 때에만 rem과 같습니다.

CSS에서 1px은 1/96인치, 1pt는 1/72인치로 정의되므로, 1px = 0.75pt입니다.

rem = px ÷ 기준 크기
px = rem × 기준 크기
pt = px × 0.75

기본 기준 16px에서 24px은 24 ÷ 16 = 1.5rem이며, 이는 18pt이고 기준 크기의 150%입니다.

px 대신 rem을 쓰는 이유는 무엇인가요?

사용자가 브라우저의 기본 글꼴 크기를 바꾸면 rem 크기도 함께 조정되므로 접근성에 도움이 됩니다.

rem과 em의 차이는 무엇인가요?

rem은 루트 요소를 기준으로 하고, em은 현재 요소의 부모를 기준으로 합니다. 따라서 중첩된 em 값은 누적됩니다.