Kalkulator clamp() CSS

CSS clamp(MIN, PREFERRED, MAX) membolehkan satu pengisytiharan menggantikan keseluruhan timbunan media query: nilai kekal pada MIN di bawah port pandang terkecil, pada MAX di atas yang terbesar, dan berskala dengan lancar di antaranya. Bahagian yang sukar ialah sebutan PREFERRED — ungkapan relatif-port-pandang seperti 0.833rem + 0.833vw — yang tiada siapa mahu terbitkan secara manual. Kalkulator ini mengiranya secara nyata daripada empat nombor: saiz minimum, saiz maksimum, dan lebar port pandang di mana setiap satu terpakai.

Setiap nombor perantaraan ditunjukkan, bukan sekadar baris akhir: cerun (berapa unit saiz nilai itu membesar per piksel port pandang), cerun yang sama dinyatakan sebagai pekali vw, dan persilangan paksi-y — pemalar yang ditambah kepada sebutan vw supaya garis itu melalui tepat dua titik yang anda tentukan. Sesiapa yang telah menampal nilai clamp() daripada tutorial tanpa memahaminya boleh melihat, dan menyemak, aritmetik sebenar di sini.

Gelangsar lebar port pandang memacu kotak pratonton langsung, jadi penskalaan bendalir kelihatan, bukan sekadar dikira: seretnya antara titik henti minimum dan maksimum dan lihat teks contoh diubah saiz tepat seperti yang berlaku semasa tetingkap pelayar sebenar diubah saiz. Baris output dan perincian dikemas kini pada setiap ketukan kekunci — ini berpasangan secara semula jadi dengan penukar px ke rem apabila saiz fon asas itu sendiri juga perlu ditukar.

Tukar ke mod skala taip untuk sistem tipografi bendalir yang lengkap dalam satu langkah: masukkan saiz asas dan nisbah modular (1.125 sehingga 1.5) dan dapatkan enam saiz — small, base, h4, h3, h2 dan h1 — setiap satu dikira sebagai baris clamp() sendiri antara janjang mudah alih yang lebih lembut dan nisbah desktop penuh, sedia untuk disalin sebagai blok sifat tersuai CSS.