反作用型でfont-sizeを決定する方法
治具で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 )'
Reference
この問題について(反作用型でfont-sizeを決定する方法), 我々は、より多くの情報をここで見つけました https://velog.io/@shin6403/반응형에서-font-size-정하는법テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol