Generator clamp() CSS

Apa itu Generator clamp() CSS?

Generator clamp() CSS adalah kalkulator tipografi fluid gratis untuk pengembang front-end dan desainer. Anda memberinya ukuran font minimum, ukuran font maksimum, lebar viewport minimum, dan lebar viewport maksimum; ia mengembalikan deklarasi clamp(min, preferred, max) yang nilai preferred-nya memadukan offset rem dengan kemiringan vw, sehingga teks tumbuh secara linier mengikuti layar dan tidak pernah keluar dari batas Anda. Ini menghilangkan kebutuhan media query font-size bertumpuk dan menjaga judul serta isi teks tetap responsif di setiap perangkat. Pilih ukuran pratinjau untuk melihat bagaimana nilainya dirender, ganti unit keluaran antara rem dan px, lalu salin baris itu langsung ke stylesheet Anda.

Cara menggunakan Generator clamp() CSS

1. Masukkan ukuran font minimum — ukuran yang seharusnya dimiliki teks pada layar terkecil.
2. Masukkan ukuran font maksimum — ukuran yang seharusnya dicapai teks pada layar terbesar.
3. Tetapkan lebar viewport minimum dan maksimum tempat ukuran harus menskala.
4. Buka pengaturan untuk mengganti unit keluaran (rem menjaga aksesibilitas; px juga tersedia) jika Anda mau.
5. Pilih ukuran pratinjau untuk merender teks contoh pada viewport tersebut, lalu baca nilai clamp() secara langsung.
6. Salin ekspresi clamp() yang dihasilkan dan tempelkan ke font-size CSS Anda.

Contoh

font min 16, font maks 20, vw min 320, vw maks 1240

font-size: clamp(1rem, 0.913rem + 0.435vw, 1.25rem);

font min 32, font maks 64, vw min 320, vw maks 1536

font-size: clamp(2rem, 1.474rem + 2.632vw, 4rem);

font min 12, font maks 14, vw min 480, vw maks 1280

font-size: clamp(0.75rem, 0.675rem + 0.25vw, 0.875rem);

Pertanyaan yang sering diajukan

Bagaimana nilai clamp() menskala tanpa media query?

clamp(min, preferred, max) menerima batas bawah, nilai preferred (fluid), dan batas atas. Nilai preferred adalah garis berbentuk rem + vw, dihitung agar font sama dengan minimum Anda pada viewport minimum dan sama dengan maksimum Anda pada viewport maksimum. Di antara lebar-lebar itu browser menginterpolasi secara otomatis, dan di luarnya clamp() mengunci ukuran ke batas terdekat — semuanya dalam satu deklarasi.

Mengapa keluarannya dalam rem alih-alih px?

Menggunakan rem untuk bagian tetap menghormati pengaturan ukuran font browser pengguna, yang lebih baik untuk aksesibilitas. Kemiringan relatif terhadap viewport dinyatakan dalam vw. Anda dapat mengganti unit ke px di pengaturan jika proyek Anda membutuhkan unit absolut, tetapi rem adalah default yang disarankan.

Rentang viewport apa yang harus saya gunakan?

Pilihan umum adalah lebar terkecil yang Anda dukung (sering 320px atau 360px) untuk minimum dan kontainer konten terlebar Anda (seperti 1240px–1536px) untuk maksimum. Font benar-benar fluid hanya di dalam rentang itu; di bawahnya teks tetap pada minimum dan di atasnya pada maksimum.

Apakah ini bekerja untuk panjang CSS apa pun, bukan hanya font-size?

Ya. Nilai clamp() yang dihasilkan hanyalah sebuah panjang, jadi Anda dapat menempelkannya ke padding, margin, gap, atau properti apa pun yang menerima panjang. Label menyebut font-size karena tipografi fluid adalah penggunaan paling umum, tetapi perhitungannya identik untuk penspasian.

Apakah data saya dikirim ke mana pun?

Tidak. Perhitungan berjalan sepenuhnya di browser Anda dengan JavaScript — ukuran font dan lebar viewport Anda tidak pernah diunggah ke server mana pun, sehingga alat ini bekerja secara privat dan bahkan offline setelah halaman dimuat.