반응형에서 font-size 정하는법

clamp로 font-size 대처하기

function clampBuilder( minWidthPx, maxWidthPx, minFontSize, maxFontSize ) {
  const root = document.querySelector( "html" );
  const pixelsPerRem = Number( getComputedStyle( root ).fontSize.slice( 0,-2 ) );

  const minWidth = minWidthPx / pixelsPerRem;
  const maxWidth = maxWidthPx / pixelsPerRem;

  const slope = ( maxFontSize - minFontSize ) / ( maxWidth - minWidth );
  const yAxisIntersection = -minWidth * slope + minFontSize

  return `clamp( ${ minFontSize }rem, ${ yAxisIntersection }rem + ${ slope * 100 }vw, ${ maxFontSize }rem )`;
}


// 최소 너비 : 375px,
// 최대 너비 : 896px,
// 최소 폰트 사이즈 : 12px,
// 최대 폰트 사이즈 16px
// clampBuilder(375,896,12,16) -> 'clamp( 12rem, 9.120921305182343rem + 12.284069097888676vw, 16rem )'