Kalkulator CSS Clamp()

CSS clamp(MIN, PREFERRED, MAX) memungkinkan satu deklarasi menggantikan seluruh tumpukan media query: nilainya tetap pada MIN di bawah viewport terkecil, pada MAX di atas yang terbesar, dan menskala dengan mulus di antaranya. Bagian yang sulit adalah suku PREFERRED—ekspresi relatif terhadap viewport seperti 0.833rem + 0.833vw—yang tidak ingin dihitung manual oleh siapa pun. Kalkulator ini menghitungnya secara nyata dari empat angka: ukuran minimum, ukuran maksimum, dan lebar viewport di mana masing-masing berlaku.

Setiap bilangan antara ditampilkan, bukan hanya baris akhir: kemiringan (berapa unit ukuran yang bertambah nilai per piksel viewport), kemiringan yang sama yang dinyatakan sebagai koefisien vw, dan perpotongan sumbu-Y—konstanta yang ditambahkan ke suku vw agar garis melewati tepat dua titik yang Anda tentukan. Siapa pun yang pernah menempelkan nilai clamp() dari tutorial tanpa memahaminya dapat melihat, dan memeriksa, aritmetika sebenarnya di sini.

Slider lebar viewport menggerakkan kotak pratinjau langsung, sehingga penskalaan fluida terlihat, bukan hanya dihitung: seret di antara breakpoint minimum dan maksimum dan lihat teks contoh berubah ukuran persis seperti saat jendela browser nyata diubah ukurannya. Baris output dan rincian diperbarui setiap penekanan tombol—ini berpasangan secara alami dengan konverter px ke rem ketika ukuran font dasar itu sendiri juga perlu dikonversi.

Beralih ke mode skala tipe untuk sistem tipografi fluida lengkap dalam satu langkah: masukkan ukuran dasar dan rasio modular (1,125 hingga 1,5) dan dapatkan enam ukuran—small, base, h4, h3, h2, dan h1—masing-masing dihitung sebagai baris clamp()-nya sendiri antara progresi yang lebih lembut di mobile dan rasio desktop penuh, siap disalin sebagai blok properti kustom CSS.