CSS 단위 변환기

CSS 단위 변환기는 CSS 가 크기 유형과 레이아웃에 사용하는 단위 사이의 길이를 변환합니다: px,rem, em,pt, %. 현대의 반응형 디자인은 상대적인 단위에 기대기 때문에 존재합니다 - 사용자의 글꼴 크기 설정과 줌으로 rem 과 em 스케일 - 디자인 모형과 오래된 스타일시트는 일반적으로 고정 픽셀로 표현됩니다. 이 도구는 24px 와 같은 값을 가져와 한 번에 1,5rem,1,5em,18pt, 150%로 표시하며 단일 필드에서 모든 방향으로 작동합니다.

변환은 모두 하나의 숫자에 달려 있습니다: 루트 (기본) 글꼴 크기, 이는 html 요소의 브라우저 기본값이기 때문에 기본값은 16px입니다. 하나의 rem은 항상 기본 글꼴 크기와 같으므로 16px에서 값 16px는 1rem, 24px는 1.5rem, 8px는 0.5rem입니다. 포인트는 CSS 참조 픽셀에 묶여 있습니다. 1 인치는 96px 및 72pt입니다. 따라서 1pt는 96/72, 약 1.333px입니다. 퍼센트는 기본 글꼴 크기의 공유로 처리되므로 100%는 기본 글꼴 크기와 같고 50%는 절반과 같습니다.

모든 변환은 두 단계를 거칩니다. 도구는 먼저 입력한 단위에 있는 픽셀 수를 곱하여 입력을 픽셀로 바꾼 다음 해당 픽셀 값을 하나의 대상 단위에 있는 픽셀 수로 나눕니다. 18px 베이스에서 27px 는 27 ÷ 18 = 1.5rem 이 되고,어떤 베이스에서든 12pt 는 12 × 96 ÷ 72 = 16px 가 됩니다. 결과는 최대 소수점 네 자리까지 반올림되므로 16px 베이스에서 15px 는 0,9375rem 을 읽습니다. vw 및 vh 와 같은 뷰포트 단위는 글꼴 크기가 아닌 창 크기에 따라 달라지기 때문에 변환기의 일부가 아닙니다. 0 이하의 기본 글꼴 크기는 16px 로 되돌아갑니다.

입력할 때 모든 것이 브라우저에서 실행되므로 서버에서 업로드 및 대기 작업이 없습니다. 기본 글꼴 크기를 변경하여 자체 글꼴 크기를 설정하는 구성 요소를 모델링하고 모든 단위에서 결과를 읽고 필요한 항목을 복사합니다. 내장된 px-to-rem 테이블을 사용하면 유형 척도에서 가장 많이 나타나는 크기에 대한 준비된 참조를 얻을 수 있습니다.