CSS Clamp

Buat nilai CSS clamp() responsif untuk tipografi yang fleksibel

Tentang kalkulator ini

Kalkulator CSS Clamp membuat ekspresi clamp(min, preferred, max) yang fluid sehingga suatu nilai berskala secara linear di antara dua lebar viewport. Masukkan nilai minimum dan maksimum (rem atau px) serta rentang viewport, lalu kalkulator menurunkan gradien vw dan titik potong garis yang melalui kedua titik, beserta nilai terhitung di setiap breakpoint sebagai pemeriksaan. Ukuran font root 16px diasumsikan untuk rem. Rentang yang terbalik menghasilkan pesan kesalahan validasi. Ideal untuk tipografi dan jarak yang fluid.

Cara menggunakan CSS Clamp

  1. Ketik atau tempel input Anda ke kolom.
  2. Baca keluarannya — langsung diperbarui saat Anda mengetik.
  3. Sesuaikan opsinya, jika ada, dengan kebutuhan Anda.
  4. Salin URL halaman untuk membagikan hasil yang persis sama.

Contoh umum

  • 1rem pada 320px → 2rem pada 1280px → clamp(1rem, 1.6667vw + 0.6667rem, 2rem)
  • 1.25rem pada 375px → 3rem pada 1440px → clamp(1.25rem, 2.6291vw + 0.6338rem, 3rem)
  • 16px pada 320px → 32px pada 1200px → clamp(16px, 1.8182vw + 10.1818px, 32px)

Pertanyaan yang sering diajukan

CSS Clamp: bagaimana cara kerjanya?

Ketik atau tempel input Anda, lalu alat ini memprosesnya langsung di browser dan segera menampilkan hasilnya. Tidak ada yang Anda ketik diunggah ke server — seluruh perhitungan berlangsung di perangkat Anda.

CSS Clamp: kapan saya memerlukannya?

Praktis untuk tugas pengembangan, debugging, desain, dan administrasi — kapan pun Anda perlu melakukan transformasi atau pemeriksaan ini dengan cepat tanpa memasang apa pun atau memercayakan data Anda kepada layanan pihak ketiga.

Seberapa andal hasilnya?

Alat ini menerapkan standar atau spesifikasi yang relevan secara langsung, sehingga keluarannya sesuai dengan yang dihasilkan perangkat lunak yang patuh standar. Kasus khusus seperti input kosong atau tidak valid dilaporkan dengan jelas alih-alih gagal diam-diam.

Bisakah saya membagikan hasil tertentu kepada orang lain?

Ya. Input Anda memperbarui URL, jadi dengan menyalin alamat di bilah alamat dan membagikan tautannya, siapa pun yang mengekliknya akan membuka alat ini dalam keadaan yang sama.