rem

Root 요소(html)의 fontSize를 기반으로 pixel 값을 rem 형태로 변환해주는 유틸 함수입니다.

suffix옵션을 통해서 계산한 rem 값에 접미사로 "rem"을 붙여서 반환시킬 수 있습니다.

toFixedDigits 옵션을 통해서 고정 소수점 표기법(fixed-point notation)으로 표시할 수 있습니다. 단, 불 필요한 소수점을 버리기 위해 한번 더 숫자로 변환 후 반환합니다.

typescript

// as-is
(1.0625).toFixed(10); // '1.0625000000'

// to-be
rem(17, { toFixedDigits: 10 }); // 1.0625

기본적으로 해당 함수로 한번 호출 된 값은 반복 계산을 방지하기 위해 캐싱 처리 됩니다. 💡 단, 주의 할 점으로 런타임 중에 js로 Root 요소(html)의 fontSize를 변경한다면 의도대로 동작하지 않을 수 있습니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

interface RemOptions {
  suffix?: boolean; // default: false
  toFixedDigits?: number;
}

const rem: (pixel: number, options?: RemOptions) => string | number;

Usage

typescript

import { rem } from '@modern-kit/utils';

// Root FontSize: 16px;
rem(16); // 1;
rem(24); // 1.5;
rem(32); // 2;

// Suffix
rem(16, { suffix: true }); // "1rem";
rem(24, { suffix: true }); // "1.5rem";
rem(32, { suffix: true }); // "2rem";

// ToFixedDigits
rem(17); // 1.0625
rem(17, { toFixedDigits: 2 }); // 1.06
rem(17, { toFixedDigits: 3 }); // 1.063
rem(17, { toFixedDigits: 4 }); // 1.0625
rem(17, { toFixedDigits: 10 }); // 1.0625