Clamp生成するよ～
すぐにコピペしたいから、作りました。
ちょうどよい使い方
- 「スマートフォン表示時の想定画面幅」をビューポート最小値に入力します
- 「PCの最大コンテナサイズ」をビューポート最大値に入力します
- 「スマートフォンで表示させたい文字サイズ」を最小値に入力します
- 「PCで表示させたい文字サイズ」を最大値に入力します
上記の方法でレスポンシブな文字サイズが設定可能です。
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);