← CSS33 / 62
clamp(): tipografi yang mengalir
clamp(minimum, ideal, maksimum) memberi nilai yang menyesuaikan diri tapi tidak pernah keluar batas. Contoh clamp(1.5rem, 5vw, 3rem): font tumbuh mengikuti lebar viewport (5vw), tapi tidak akan lebih kecil dari 1.5rem atau lebih besar dari 3rem. Satu baris ini menggantikan tiga media query.
👀 Contoh dulu
/* clamp(minimum, ideal, maksimum) */
.judul { font-size: clamp(1rem, 3vw, 2rem); }
.wadah { padding: clamp(1rem, 5vw, 4rem); }Hasilnya: Ukuran font dan padding tumbuh mulus mengikuti lebar layar, tapi berhenti di batas minimum dan maksimum.
💡 vw = 1% lebar viewport. Jadi 3vw di layar 1000px = 30px. clamp mencegahnya jadi terlalu kecil atau raksasa.
📝 Sekarang giliranmu
Beri h1 ukuran font-size: clamp(1.5rem, 5vw, 3rem).
Preview