最近よく使用されているCSSの実装テクニック！ レスポンシブ対応のフォントサイズをclamp()で超簡単に定義できるツール -clamp() Calculator

フォントのサイズをレスポンシブ対応にする際、最近よく使用されている実装方法がclamp()関数を使用した流体タイポグラフィです。CSSのclamp()関数を使用すると、ビューポートをベースにしてフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのスクリーンサイズが増えた現在に欠かせないテクニックです。 たとえば、小さいスクリーンでは最小値の16px、スクリーンが大きくなるにつれ、最大値の24pxになるまで少しずつ大きくなる、という感じです。メディアクエリは一切不要なので、たった一行で全サイズを設定できます。 CSSのclamp()関数を使用して、レスポンシブ対応のフォントサイズを超簡単に定義できるツールを紹介します。 clamp() Calculator clamp() Calculatorの特徴 clamp() Calculatorの使い方 clamp(

[coliss]

CSSでレスポンシブ対応のフォントサイズを超簡単に定義できる便利ツール。

[pmint]

マジックナンバー、スパゲティコード。第2パラメーターにrem含めるのは何？4つ入力する値のうち、最後のひとつは自動計算すべき。CSSを工夫しても表示上の文字サイズにはならないので、読みやすくもならない。

[mayumayu_nimolove]

1remは1remで使いたい