Clamp関数生成ツール
CSSのClamp関数を計算します。複数のフォーマットで出力可能、で、px/rem変換にも対応しています
Results...
default
そのまま使いたい時に
clamp(1rem, 0.824rem + 0.751vw, 1.5rem);font-size
CSS用のフォントサイズ設定に
font-size: clamp(1rem, 0.824rem + 0.751vw, 1.5rem);width
幅の設定に
width: clamp(1rem, 0.824rem + 0.751vw, 1.5rem);height
高さの設定に
height: clamp(1rem, 0.824rem + 0.751vw, 1.5rem);tailwind
Tailwindの一時利用に
[clamp(1rem,0.824rem+0.751vw,1.5rem)]tailwind-text
Tailwind用のフォントサイズ設定に
text-[clamp(1rem,0.824rem+0.751vw,1.5rem)]css-variables
CSS変数の設定に
--clamp: clamp(1rem, 0.824rem + 0.751vw, 1.5rem);これがPreviewテキストです！
補足
- 下記の方法でレスポンシブな文字サイズが設定可能です。
- 「スマートフォン表示時の想定画面幅」をビューポート最小値に入力します
- 「PCの最大コンテナサイズ」をビューポート最大値に入力します
- 「スマートフォンで表示させたい文字サイズ」を最小値に入力します
- 「PCで表示させたい文字サイズ」を最大値に入力します
- rootでフォントサイズを変更している場合（例:
:root { font-size: 62.5% }等）は正しく動作しない場合があります。その場合、結果をpxで出力するオプションを使ってください。
