CSS font-size: clamp(1rem, 2vw, 2rem); のサンプル

2vwが使用されている場合は

• ビューポートの幅が400pxの場合は 400px * 0.02 = 8px
• ビューポートの幅が800pxの場合は 800px * 0.02 = 16px
• ビューポートの幅が1600pxの場合は 1600px * 0.02 = 32px

1remは16px、2remは32pxです。

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

<p class="example">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>

.example {
  font-size: clamp(1rem, 2vw, 2rem);
}

元記事を表示する