responsive-font-size

• .rfs.rfs-N 을 클래스에 사용하면 N개의 글자만큼 한줄에 보이도록 font-size가 조정 된다.(소문자 m 기준이며 전각일 경우 2배의 너비가 필요)

CSS

• :root{
--rfs-min:8px; /* 최소 폰트 사이즈 */
--rfs-max:100vw; /* 최대 폰트 사이즈 */
--rfs-size:calc(100vw / 20 ); /* 기본 폰트 사이즈 */
}
• .rfs{
font-size:clamp(var(--rfs-min),var(--rfs-size),var(--rfs-max));
}
• .rfs-NN{--rfs-size:calc(100vw / NN )} /* 100vw기준 NN개의 글자가 한줄에 표시된다. */ sample
• .rfs-vmin-NN{--rfs-size:calc(100vmin / NN )} /* 100vmin기준 NN개의 글자가 한줄에 표시된다. */ sample