CSS Clamp() Kalkulator

Pengapit CSS(MIN, PREFERRED, MAX) membolehkan satu pengisytiharan menggantikan keseluruhan timbunan pertanyaan media: nilai kekal pada MIN di bawah port pandangan terkecil, pada MAX di atas terbesar dan skala dengan lancar di antara. Perkara yang sukar ialah istilah PREFERRED — ungkapan relatif port pandangan seperti 0.833rem + 0.833vw — yang tiada siapa mahu terbitkan dengan tangan. Kalkulator ini mengiranya secara nyata daripada empat nombor: saiz minimum, saiz maksimum dan lebar port pandangan yang digunakan setiap satu.

Setiap nombor perantaraan ditunjukkan, bukan hanya garis akhir: cerun (berapa banyak unit saiz nilai berkembang setiap piksel port pandangan), cerun yang sama dinyatakan sebagai pekali vw, dan persimpangan paksi-y — pemalar ditambah pada sebutan vw supaya garisan itu melalui tepat dua titik yang anda tentukan. Sesiapa sahaja yang telah menampal nilai clamp() daripada tutorial tanpa memahaminya boleh melihat dan menyemak, aritmetik sebenar di sini.

Gelangsar lebar port pandangan memacu kotak pratonton langsung, jadi penskalaan bendalir boleh dilihat, bukan hanya dikira: seretnya antara titik putus min dan maks dan tonton saiz teks sampel betul-betul seperti yang dilakukan semasa tetingkap penyemak imbas sebenar diubah saiznya. Garis keluaran dan kemas kini pecahan pada setiap ketukan kekunci — ini berpasangan secara semula jadi dengan penukar px ke rem apabila saiz fon asas itu sendiri perlu ditukar juga.

Beralih kepada mod skala taip untuk sistem tipografi bendalir lengkap dalam satu langkah: masukkan saiz asas dan nisbah modular (1.125 hingga 1.5) dan dapatkan enam saiz — kecil, asas, h4, h3, h2 dan h1 — masing-masing dikira sebagai garis pengapit() sendiri antara perkembangan mudah alih yang lebih lembut dan nisbah desktop penuh, sedia untuk disalin sebagai blok sifat CSS tersuai.