px・rem変換＆clamp()計算

PX ⇄ REM ⇄ EM

単位変換

rem

emの基準（親要素のフォントサイズ） px ルートのフォントサイズと同じ

remはルート（html）のフォントサイズ、emは親要素のフォントサイズが基準です。ブラウザの初期値は16pxです。

FLUID TYPE · CLAMP()

フォントサイズ最小px 最大px

ビューポート幅最小px 最大px

プレビューのビューポート幅 px → —px

画面幅に合わせて文字サイズが変わります

プレビューテキストはクリックして編集できます。ルートのフォントサイズを変えると、remの値が再計算されます。

使い方

ルートのフォントサイズを設定します（ブラウザの初期値は16px、62.5%のテクニックなら10px）。

px・rem・emのどれかに値を入力すると、ほかの単位がすぐに更新されます。値の横の「コピー」でコピーできます。

clamp()では、フォントサイズの最小・最大と、それを適用するビューポート幅を入力します。

ビューポートのスライダーを動かして幅ごとのサイズを確認し、clamp()だけか宣言全体をコピーします。

よくある質問

remとemの違いは何ですか？

remはルート（html）のフォントサイズが基準なので、ページ内のどこでも同じ大きさになります。emは親要素のフォントサイズが基準なので、要素を入れ子にすると倍率が重なっていきます。

clamp()の式はどういう仕組みですか？

clamp(最小, 推奨値, 最大) はサイズを最小と最大の間に収めます。推奨値はremとvwを組み合わせていて、指定した2つのビューポート幅の間で文字がなめらかに大きくなります。

clamp()の結果がremで出るのはなぜですか？

最小・最大をremにすると、ブラウザの文字サイズ設定を変えている人にも対応できるためです。px版が必要な場合は下に表示されます。