Langkau ke kandungan utama
LibraTool logoLibraTool

Penjana clamp() CSS percuma

Jana nilai clamp() CSS yang lancar untuk tipografi dan jarak responsif. Tetapkan saiz min/maks dan julat viewport, lihat pratonton langsung, dan salin CSS satu baris.

Berfungsi luar talian selepas dimuatkan
Unit output:
Nilai CSS
font-size: clamp(1rem, 1.5023vw + 0.6479rem, 2rem);
Kelas Tailwind
text-[clamp(1rem,1.5023vw_+_0.6479rem,2rem)]
768px lebar β†’ 21.9px
Aa 22px

Saiz dipapar pada viewport berbeza

375px lebarAa 16px
908px lebarAa 24px
1440px lebarAa 32px

clamp(min, preferred, max) menskalakan nilai secara lancar mengikut viewport, kemudian mengunci pada min dan max. Ia menggantikan susunan media queries untuk tipografi, jarak, dan lebar dengan satu baris.

Kegunaan biasa

  • Cipta tipografi responsif bendalirSaiz saiz font dengan lancar antara mudah alih dan desktop dengan satu baris.
  • Margin bendalir dan paddingDapatkan jarak bahagian untuk berkembang dengan pandangan daripada melompat pada titik putus.
  • Ganti pertanyaan media dengan clamp()Runtuhkan tumpukan penolakan titik putus kepada nilai bendalir tunggal.
  • Bina skala jenis bendalirHasilkan langkah clamp() yang konsisten untuk skala jenis sistem reka bentuk.
  • Kepala pahlawan dan paparan bendalirBuat tajuk halaman pendaratan besar skala secara dramatis namun tetap selamat.

Cara ia berfungsi

Alat ini mengira nilai CSS clamp() menggunakan formula interpolasi linear tulisan tangan β€” tiada pustaka, tiada pergi-balik pelayan. Anda masukkan dua saiz dan dua lebar viewport; matematik berjalan serta-merta dalam pelayar anda dan menghasilkan ungkapan clamp() sedia-tampal dengan nilai pilihan berasaskan-vw yang menskala jenis atau jarak anda secara lancar antara titik-titik pemisah itu.

  1. 1
    Pengiraan cerun linear
    Alat ini mengira cerun piksel-per-piksel: (maxSize - minSize) / (maxViewport - minViewport). Cerun ini kemudian ditukar kepada unit vw dengan menggandakan dengan 100, yang merupakan teras cara penskalaan relatif-viewport CSS berfungsi.
  2. 2
    Perolehan pintasan
    Ofset pintasan (dalam px atau rem) dikira supaya fungsi linear mengena tepat saiz minimum anda pada viewport minimum. Bersama, cerun dan pintasan membentuk nilai pilihan di dalam clamp() β€” bahagian yang sebenarnya berskala.
  3. 3
    Penukaran unit dan pemformatan output
    Jika anda pilih output rem, setiap nilai piksel dibahagikan dengan saiz fon akar yang dikonfigurasi anda (lalai 16px) sebelum ditulis ke dalam rentetan clamp(). Kelas nilai-sembarang Tailwind yang sepadan juga dihasilkan, dengan ruang digantikan dengan garis bawah mengikut sintaks Tailwind.
  4. 4
    Pratonton penggelangsar viewport langsung
    Penggelangsar julat membolehkan anda gosok dari 320px hingga 1920px lebar. Pada setiap kedudukan formula cerun-dan-pintasan yang sama menilai saiz terapit secara masa nyata dan memaparkan teks sampel pada saiz piksel terkira itu, jadi anda boleh lihat kelakuan penskalaan sebelum menyalin apa-apa.

Alat berkaitan

🟦

Penjana Petak CSS

Reka bentuk petak CSS secara visual β€” trek, unit dan jurang β€” dan salin CSS dan HTML yang dijana.

Cuba
πŸ“

Apakah Resolusi Skrin Saya

Lihat resolusi skrin anda dalam piksel CSS dan sebenar, saiz tetingkap, nisbah piksel, kedalaman warna, HDR, sokongan sentuh dan kadar segar semula, dan salin semuanya.

Cuba
Popular
✍️

Pembuat Tandatangan

Lukis tandatangan dengan tetikus, jari, atau stylus anda, atau taip nama anda dalam fon tulisan tangan, kemudian eksportnya sebagai PNG atau SVG lutsinar.

Cuba

Soalan lazim