Rekomendasi Kursus:

Fungsi CSS clamp()

Definisi dan Penggunaan CSS clamp() Fungsi ini digunakan untuk menetapkan nilai yang akan berubah sesuai ukuran viewport antara nilai minimum dan nilai maksimal.

clamp() Fungsi ini memiliki tiga parameter: nilai minimum, nilai yang dipilih, dan nilai maksimal. Jika nilai yang dipilih berada dalam rentang yang ditentukan, browser akan memilih nilai yang dipilih; jika tidak, browser akan memilih nilai minimum atau nilai maksimal.

Contoh

Atur ukuran font minimum elemen <h1> menjadi 2rem dan ukuran font maksimal menjadi 3.5rem. Simultaneously, atur ukuran font minimum elemen <p> menjadi 1rem dan ukuran font maksimal menjadi 2.5rem:

h1 {
  font-size: clamp(2rem, 2.5vw, 3.5rem);
}
p {
  font-size: clamp(1rem, 2.5vw, 2.5rem);
}

Coba Sendiri

CSS Syntax

clamp(min, preferred, max)

Detil Teknologi

Dukungan Browser

Angka di dalam tabel menunjukkan versi browser yang sepenuhnya mendukung fungsi ini.