clampとビューポート単位の利用

vw, vh, dvh などのビューポート単位を利用することで、画面サイズに応じて滑らかに変化するデザインを実現することができます。

例えば、font-size に vw を利用することで、画面幅に応じたフォントサイズが指定可能です。

さらに、clampを併用することで、最大値と最小値を指定することができます。

この例では、フォントサイズを 6vw （画面の横幅の 6%） としています。これを、clamp を利用し、16px を下回る場合は 16px に、32px を上回る場合には 32px に丸めています。

.heading {
font-size: clamp(16px, 6vw, 32px);
}