CSS Fluid Typography Clamp Min Max

Ringkasan

clamp()/min()/max() membuat nilai yang menyesuaikan viewport — cocok untuk fluid typography & spacing tanpa media query.

Konsep Dasar

• clamp(min, preferred, max) — nilai antara min & max, preferensi di tengah.
• min(a,b) ambil yang terkecil; max(a,b) terbesar.
• Preferensi pakai vw (contoh 2vw) agar skala dengan lebar layar.
• clamp(1rem, 0.5rem + 1vw, 1.5rem) → aman di layar kecil & besar.

Cara Kerja / Struktur

css

:root { --step-1: clamp(1rem, 0.8rem + 1vw, 1.5rem); }
h1 { font-size