Kalkulator CSS Clamp()

Penjepit CSS(MIN, PREFERRED, MAX) memungkinkan satu deklarasi menggantikan seluruh tumpukan kueri media: nilainya tetap pada MIN di bawah area pandang terkecil, pada MAX di atas area pandang terbesar, dan diskalakan dengan lancar di antaranya. Bagian tersulitnya adalah istilah PREFERRED - ekspresi relatif viewport seperti 0.833rem + 0.833vw - yang tidak ingin diturunkan secara manual oleh siapa pun. Kalkulator ini menghitungnya secara nyata dari empat angka: ukuran minimum, ukuran maksimum, dan lebar area pandang yang menerapkan masing-masing angka.

Setiap bilangan perantara ditampilkan, bukan hanya garis akhir: kemiringan (berapa satuan ukuran yang bertambah nilainya per piksel area pandang), kemiringan yang sama dinyatakan sebagai koefisien vw, dan perpotongan sumbu y — konstanta yang ditambahkan ke suku vw sehingga garis melewati tepat dua titik yang Anda tentukan. Siapa pun yang telah menempelkan nilai penjepit() dari tutorial tanpa memahaminya dapat melihat, dan memeriksa, aritmatika sebenarnya di sini.

Penggeser lebar area pandang menggerakkan kotak pratinjau langsung, sehingga penskalaan yang lancar terlihat, bukan hanya dihitung: seret antara titik henti sementara min dan maks dan lihat contoh teks diubah ukurannya persis seperti saat jendela browser sebenarnya diubah ukurannya. Garis keluaran dan pembaruan perincian pada setiap penekanan tombol — ini berpasangan secara alami dengan pengonversi px ke rem ketika ukuran font dasar itu sendiri juga perlu diubah.

Beralih ke mode skala tipe untuk sistem tipografi cair lengkap dalam satu langkah: masukkan ukuran dasar dan rasio modular (1,125 hingga 1,5) dan dapatkan enam ukuran — kecil, dasar, h4, h3, h2, dan h1 — masing-masing dihitung sebagai garis penjepit() sendiri antara perkembangan seluler yang lebih lembut dan rasio desktop penuh, siap disalin sebagai blok properti kustom CSS.