Langsung ke konten utama
LibraTool logoLibraTool

Generator CSS clamp() gratis

Hasilkan nilai CSS clamp() yang fluid untuk tipografi dan spasi responsif. Atur ukuran min/maks dan rentang viewport, lihat pratinjau langsung, dan salin CSS satu baris.

Berfungsi offline setelah dimuat
Satuan keluaran:
Nilai CSS
font-size: clamp(1rem, 1.5023vw + 0.6479rem, 2rem);
Kelas Tailwind
text-[clamp(1rem,1.5023vw_+_0.6479rem,2rem)]
Lebar 768px β†’ 21.9px
Aa 22px

Ukuran render di berbagai viewport

Lebar 375pxAa 16px
Lebar 908pxAa 24px
Lebar 1440pxAa 32px

clamp(min, preferred, max) menyesuaikan nilai secara dinamis dengan viewport lalu mengunci di min dan max. Menggantikan tumpukan media query untuk tipografi, spasi, dan lebar dengan satu baris.

Penggunaan umum

  • Buat Tipografi Responsif FluidUkuran font skala dengan mulus antara mobile dan desktop dengan satu baris.
  • Margin dan Spasi FluidBuat spasi bagian tumbuh dengan viewport daripada melompat di breakpoint.
  • Ganti Kueri Media dengan clamp()Runtuh tumpukan override breakpoint menjadi nilai fluid tunggal.
  • Bangun Skala Tipe FluidHasilkan langkah clamp() yang konsisten untuk skala tipe sistem desain.
  • Judul Pahlawan dan Tampilan FluidSkala judul halaman landing besar secara dramatis namun aman.

Cara kerja

Alat ini menghitung nilai CSS clamp() menggunakan rumus interpolasi linear tulisan tangan β€” tanpa library, tanpa perjalanan pulang-pergi server. Anda memasukkan dua ukuran dan dua lebar viewport; matematikanya berjalan instan di browser Anda dan menghasilkan ekspresi clamp() siap-tempel dengan nilai preferensi berbasis vw yang menskalakan tipografi atau spasi Anda dengan mulus di antara breakpoint tersebut.

  1. 1
    Perhitungan kemiringan linear
    Alat ini menghitung kemiringan piksel-per-piksel: (ukuranMaks - ukuranMin) / (viewportMaks - viewportMin). Kemiringan ini kemudian dikonversi ke satuan vw dengan mengalikan 100, yang merupakan inti dari cara kerja penskalaan relatif-viewport CSS.
  2. 2
    Penurunan intercept
    Offset intercept (dalam px atau rem) dihitung sehingga fungsi linear tepat mencapai ukuran minimum Anda pada viewport minimum. Bersama-sama, kemiringan dan intercept membentuk nilai preferensi di dalam clamp() β€” bagian yang benar-benar menskala.
  3. 3
    Konversi satuan dan pemformatan keluaran
    Jika Anda memilih keluaran rem, setiap nilai piksel dibagi dengan ukuran font root yang Anda konfigurasi (default 16px) sebelum ditulis ke dalam string clamp(). Kelas nilai-sembarang Tailwind yang cocok juga dihasilkan, dengan spasi diganti garis bawah sesuai sintaks Tailwind.
  4. 4
    Pratinjau penggeser viewport langsung
    Penggeser rentang memungkinkan Anda menggeser dari 320px hingga 1920px lebar. Pada setiap posisi, rumus kemiringan-dan-intercept yang sama mengevaluasi ukuran yang diclamp secara real time dan merender teks contoh pada ukuran piksel yang dihitung itu, sehingga Anda bisa melihat perilaku penskalaan sebelum menyalin apa pun.

Alat terkait

🟦

Generator CSS Grid

Desain CSS grid secara visual β€” track, unit, dan gap β€” lalu salin CSS dan HTML yang dihasilkan.

Coba
πŸ“

Berapa Resolusi Layar Saya

Lihat resolusi layar Anda dalam piksel CSS dan nyata, ukuran jendela, rasio piksel, kedalaman warna, HDR, dukungan sentuh dan refresh rate, lalu salin semuanya.

Coba
Populer
✍️

Pembuat Tanda Tangan

Gambar tanda tangan dengan mouse, jari, atau stylus, atau ketik nama Anda dalam font tulisan tangan, lalu ekspor sebagai PNG atau SVG transparan.

Coba

Pertanyaan yang sering diajukan