CSS clampによる可変文字サイズ計算
2つの画面幅の間で上下限付きの文字サイズを補間し、remとvwを組み合わせた係数を求めます。
計算結果
結果
—
計算手順
手順を1つずつ、またはまとめて表示できます。現在の入力値を使った計算手順です。
計算方法
アフィン補間をエンドポイントサイズにクランクし、入力されたレム参照を使用してインターセプトを表す。
Slope=(sizeHigh−sizeLow)/(widthHigh−widthLow); preferred px=intercept+slope×viewport px
計算例
16 pxが320 px、24 pxが1280 px、20 pxが800 pxである。
前提条件と入力上の注意
ビューポートの幅の増加とエンドポイントのサイズの非減少が必要である。入力されたルートサイズに係数が一致し、ルートフォントサイズを変更すると、ブラウザの動作が変化する。このページにはCSSは適用されていません。
このツールの使い方
自分の値を入力できますか？
はい。入力例をご自身の値に変更してください。結果・計算手順・表・対応する図が入力に応じて更新されます。空欄や無効な値がある場合は結果を消去し、不足した入力を自動的に例の値で補うことはありません。
結果は厳密ですか？
浮動小数点演算を使用し、表示時に丸めています。計算式・前提条件・記載されたデータ精度を確認して結果を解釈してください。
入力内容は送信されますか？
計算はブラウザー内で行います。アカウント・ファイルのアップロード・外部AIサービスは不要です。ページを再読み込みすると入力値は保持されません。
ルートと親要素の文字サイズを個別に指定し、px、rem、em、%、CSSポイントを換算します。
基準サイズと倍率から、指定範囲内の幾何級数的な文字サイズを生成し、pxとremで表示します。
既知の2点と目標xまたはyから他方の座標を求め、直線モデルで補間・外挿を明確に区別します。
広告掲載用スペースです。