Kalkulator CSS clamp()
Masukkan ukuran untuk layar kecil dan besar, lalu dapatkan nilai clamp() dinamis yang berskala mulus di antaranya — cocok untuk ukuran font, padding, margin, atau gap.
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)Hasil kalkulasi mempertahankan bagian rem di nilai tengahnya, sehingga ukuran teks tetap membesar saat pengguna melakukan zoom hingga 200% — hal yang tidak akan terjadi jika hanya menggunakan nilai viewport.
Teks dinamis, ukuran pas di setiap layar.
Kalkulasi ini berjalan sepenuhnya di browser Anda. Tidak ada data yang Anda masukkan di sini yang diunggah ke BroBroGo.
Tanya Jawab
Bagaimana kalkulator ini menyusun nilai clamp()?
Anda menentukan dua titik acuan: ukuran pada lebar layar kecil dan ukuran pada lebar layar besar. Kalkulator ini akan menarik garis lurus di antara keduanya sehingga ukuran tumbuh secara mulus seiring bertambahnya lebar layar, lalu membungkusnya dalam fungsi clamp() agar nilainya tidak pernah turun di bawah batas layar kecil atau melebihi batas layar besar Anda. Di antara kedua lebar tersebut, ukurannya akan berskala secara dinamis (fluid); di luar itu, ukurannya akan tertahan pada batas terdekat.
Mengapa hasilnya menggunakan rem dan vw, bukan piksel?
Batas ukuran menggunakan rem dan bagian tengah yang dinamis mempertahankan komponen rem, sehingga teks tetap membesar saat pembaca memperbesar halaman atau mengubah ukuran font default browser mereka — hal yang tidak akan berfungsi jika hanya menggunakan piksel atau viewport. Anda memasukkan ukuran dalam piksel karena lebih mudah dipahami, dan alat ini akan mengonversinya ke rem berdasarkan ukuran font root Anda.
Apakah saya bisa menggunakan ini untuk jarak (spacing), bukan hanya ukuran font?
Ya. Nilai yang sama dapat digunakan untuk padding, margin, gap, width, atau height — di mana pun nilai panjang digunakan. Ubah mode pratinjau ke Kotak untuk melihat perubahan jarak ruang, bukan teks. Jika ukuran kecil dan besar Anda sama, hasilnya akan disederhanakan menjadi nilai panjang tetap biasa karena tidak ada yang perlu diskalakan.
Apakah semua browser mendukung fungsi clamp()?
Ya — semua browser modern telah mendukung clamp() sejak tahun 2020, sehingga Anda dapat langsung menggunakan nilai ini tanpa perlu fallback. Jika Anda menetapkan nilai maksimum yang sangat besar atau laju perubahan yang cepat, sebaiknya lakukan pemeriksaan cepat pada zoom 200% untuk memastikan teks tetap membesar bagi pembaca yang membutuhkannya.