レイアウト

clamp()生成

ビューポート最小〜最大とフォントサイズを指定してCSS生成

最小サイズ (px)最大サイズ (px)最小ビューポート (px)最大ビューポート (px)

プレビュー

Fluid Typography

min rem

1.125rem

max rem

2.000rem

CSS

コピーしました

:root {
  --fluid-heading: clamp(18px, calc(18px + (14) * ((100vw - 360px) / 920)), 32px);
}

.hero-title {
  font-size: var(--fluid-heading);
}