Kalkulator CSS clamp()

Masukkan saiz untuk skrin kecil dan besar dan dapatkan nilai clamp() bendalir yang diskalakan dengan lancar di antaranya — untuk saiz fon, padding, margin atau gap.

Saiz
Minimum
Maksimum
Nilai clamp()
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)

Hasil mengekalkan bahagian rem dalam sebutan tengah, jadi teks masih membesar apabila seseorang mengezum ke 200% — nilai viewport sahaja tidak akan berbuat demikian.

Pratonton

Teks bendalir, saiz yang tepat.

Laraskan saiz dan lebar skrin untuk membentuk nilai.

Pengiraan dijalankan sepenuhnya dalam penyemak imbas anda. Tiada apa-apa yang anda masukkan di sini akan dimuat naik ke BroBroGo.

Soalan Lazim

Bagaimanakah kalkulator membina nilai clamp()?

Anda memberikan dua titik: saiz pada lebar skrin kecil dan saiz pada skrin besar. Ia melukis garis lurus di antaranya supaya saiz membesar dengan lancar apabila skrin melebar, kemudian membungkusnya dalam clamp() supaya ia tidak pernah jatuh di bawah saiz skrin kecil anda atau meningkat melebihi saiz skrin besar anda. Di antara dua lebar tersebut, saiz diskalakan secara bendalir; di luarnya, ia kekal pada had terdekat.

Mengapakah hasilnya dalam rem dan vw dan bukannya piksel?

Sempadan adalah dalam rem dan bahagian tengah yang berubah mengekalkan komponen rem, jadi teks masih membesar apabila pembaca mengezum masuk atau meningkatkan saiz fon lalai penyemak imbas mereka — nilai piksel atau viewport sahaja boleh menghalang fungsi ini daripada berfungsi. Anda menaip saiz dalam piksel kerana begitulah cara kebanyakan orang memikirkannya, dan alat ini menukar kepada rem menggunakan saiz fon akar anda.

Bolehkah saya menggunakan ini untuk jarak, bukan hanya saiz fon?

Ya. Nilai yang sama berfungsi untuk padding, margin, gap, lebar atau tinggi — di mana-mana sahaja panjang digunakan. Tukar pratonton kepada Kotak untuk melihat jarak membesar dan bukannya teks. Jika saiz kecil dan besar anda adalah sama, hasilnya akan mengecil kepada panjang tetap biasa, kerana tiada apa yang perlu diskalakan.

Adakah semua penyemak imbas menyokong clamp()?

Ya — setiap penyemak imbas semasa telah menyokong clamp() sejak 2020, jadi anda boleh menggunakan nilai tersebut seadanya tanpa sandaran. Pada maksimum yang sangat besar atau kadar perubahan yang cepat, adalah wajar untuk membuat semakan pantas pada zum 200% bagi memastikan teks masih membesar untuk pembaca yang memerlukannya.

Ditulis dan disemak oleh pasukan editorial BroBroGo.Terakhir dikemas kini:

Fungsi clamp() dalam CSS merupakan kaedah yang sangat berkesan untuk melaksanakan reka bentuk responsif yang lancar. Dengan menetapkan had minimum, nilai boleh ubah, dan had maksimum, fungsi ini membolehkan elemen seperti saiz fon, padding, margin, gap, lebar, atau tinggi menyesuaikan diri secara dinamik mengikut saiz skrin pengguna.

Kalkulator CSS clamp() memudahkan proses pengiraan formula matematik di sebalik fungsi ini. Anda hanya perlu memasukkan saiz yang diingini untuk skrin kecil dan skrin besar, dan alat ini akan menjana kod CSS yang sedia untuk digunakan.

Cara Fungsi CSS clamp() Berfungsi

Fungsi clamp() menerima tiga parameter utama: clamp(MIN, VAL, MAX).

  • Had Minimum (MIN): Nilai paling kecil yang dibenarkan. Walau seberapa kecil sekalipun skrin peranti, saiz elemen tidak akan jatuh di bawah nilai ini.
  • Nilai Fleksibel (VAL): Nilai dinamik yang biasanya menggunakan gabungan unit viewport (vw) dan unit relatif (rem). Bahagian ini membolehkan saiz elemen berubah secara bendalir mengikut lebar skrin.
  • Had Maksimum (MAX): Nilai paling besar yang dibenarkan. Saiz elemen tidak akan meningkat melebihi had ini walaupun skrin peranti menjadi sangat lebar.

Di antara lebar skrin minimum dan maksimum yang anda tetapkan, saiz elemen akan melalui fasa "skala bendalir". Di luar julat skrin tersebut, saiz akan "ditahan pada tahap minimum" atau "ditahan pada tahap maksimum" bagi mengekalkan kebolehbacaan dan struktur reka letak yang kemas.

Input dan Parameter Pengiraan

Untuk menjana fungsi clamp() yang tepat, kalkulator ini memerlukan beberapa input angka daripada anda:

  1. Saiz Minimum: Saiz elemen (dalam piksel) yang anda inginkan pada paparan skrin kecil.
  2. Lebar Skrin Minimum: Lebar skrin terkecil (dalam piksel) di mana proses penskalaan bermula.
  3. Saiz Maksimum: Saiz elemen (dalam piksel) yang anda inginkan pada paparan skrin besar.
  4. Lebar Skrin Maksimum: Lebar skrin terbesar (dalam piksel) di mana proses penskalaan berhenti.
  5. Saiz fon akar: Nilai piksel (biasanya 16px secara lalai) yang digunakan oleh kalkulator untuk menukar input piksel anda kepada unit rem.

Alat ini memerlukan nombor yang sah dalam setiap medan. Jika terdapat input yang tidak sah, status ralat akan dipaparkan. Selain itu, lebar skrin kecil mestilah nombor positif yang lebih kecil daripada skrin besar. Jika syarat ini tidak dipenuhi, kalkulator akan memaparkan nilai — dan menunjukkan mesej ralat: "Lebar skrin kecil mestilah nombor positif yang lebih kecil daripada skrin besar.".

Memahami Output dan Status Kalkulator

Sebaik sahaja anda memasukkan nilai yang betul, kalkulator akan menjana output secara langsung:

  • Nilai clamp(): Hasil formula dalam bentuk kod CSS, contohnya: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem).
  • Pratonton: Anda boleh melihat simulasi visual penskalaan ini dalam mod "Teks" (memaparkan "Teks bendalir, saiz yang tepat.") atau mod "Kotak" untuk melihat perubahan jarak.
  • Lebar pratonton: Paparan angka yang menunjukkan lebar semasa kawasan pratonton untuk melihat bagaimana elemen bertindak balas.

Kalkulator juga akan memaparkan status semasa berdasarkan input anda:

  • "Laraskan saiz dan lebar skrin untuk membentuk nilai." — Mesej sedia ada apabila anda mula menggunakan alat.
  • "Skala terbalik — saiz mengecil apabila skrin membesar." — Dipaparkan jika saiz minimum anda lebih besar daripada saiz maksimum.
  • "Kedua-dua saiz adalah sama, jadi ini adalah nilai tetap, bukan bendalir." — Muncul apabila saiz kecil dan besar yang dimasukkan adalah sama, menyebabkan output mengecil kepada panjang tetap biasa.

Kepentingan Aksesibiliti dan Unit rem

Salah satu kelebihan utama menggunakan kalkulator ini adalah penghasilan kod yang mesra aksesibiliti. Formula yang dijana memastikan sempadan ditukar kepada rem, dan bahagian tengah yang berubah mengekalkan komponen rem bersama-sama unit vw.

Jika anda hanya menggunakan unit viewport (vw) sahaja untuk saiz fon, teks tidak akan membesar apabila pengguna menggunakan fungsi zum pada penyemak imbas mereka. Dengan mengekalkan komponen rem dalam sebutan tengah, teks masih membesar apabila seseorang mengezum ke 200%. Ini memenuhi standard aksesibiliti web yang penting untuk membantu pembaca yang mempunyai masalah penglihatan.

Pemprosesan Tempatan dan Privasi Data

Apabila menggunakan kalkulator ini, anda tidak perlu risau tentang keselamatan data anda. Pengiraan dijalankan sepenuhnya dalam penyemak imbas anda. Tiada apa-apa yang anda masukkan di sini akan dimuat naik ke BroBroGo. Semua proses matematik berlaku secara lokal pada peranti anda secara langsung.

Soalan Lazim (FAQ)

Bagaimanakah kalkulator membina nilai clamp()? Anda memberikan dua titik: saiz pada lebar skrin kecil dan saiz pada skrin besar. Ia melukis garis lurus di antaranya supaya saiz membesar dengan lancar apabila skrin melebar, kemudian membungkusnya dalam clamp() supaya ia tidak pernah jatuh di bawah saiz skrin kecil anda atau meningkat melebihi saiz skrin besar anda. Di antara dua lebar tersebut, saiz diskalakan secara bendalir; di luarnya, ia kekal pada had terdekat.

Mengapakah hasilnya dalam rem dan vw dan bukannya piksel? Sempadan adalah dalam rem dan bahagian tengah yang berubah mengekalkan komponen rem, jadi teks masih membesar apabila pembaca mengezum masuk atau meningkatkan saiz fon lalai penyemak imbas mereka — nilai piksel atau viewport sahaja boleh menghalang fungsi ini daripada berfungsi. Anda menaip saiz dalam piksel kerana begitulah cara kebanyakan orang memikirkannya, dan alat ini menukar kepada rem menggunakan saiz fon akar anda.

Bolehkah saya menggunakan ini untuk jarak, bukan hanya saiz fon? Ya. Nilai yang sama berfungsi untuk padding, margin, gap, lebar atau tinggi — di mana-mana sahaja panjang digunakan. Tukar pratonton kepada Kotak untuk melihat jarak membesar dan bukannya teks. Jika saiz kecil dan besar anda adalah sama, hasilnya akan mengecil kepada panjang tetap biasa, kerana tiada apa yang perlu diskalakan.

Adakah semua penyemak imbas menyokong clamp()? Ya — setiap penyemak imbas semasa telah menyokong clamp() sejak 2020, jadi anda boleh menggunakan nilai tersebut seadanya tanpa sandaran. Pada maksimum yang sangat besar atau kadar perubahan yang cepat, adalah wajar untuk membuat semakan pantas pada zum 200% bagi memastikan teks masih membesar untuk pembaca yang memerlukannya.

Penjana CSS Cubic BezierSeret dua pemegang untuk membentuk keluk pelonggaran, lihat titik bergerak melaluinya berbanding keluk yang stabil, dan salin nilai cubic-bezier().Penjana Box ShadowSeret gelongsor untuk membentuk box-shadow, susun lapisan untuk kedalaman, dan salin CSS yang telah siap serta-merta.Penjana KecerunanBina kecerunan linear, jejarian atau konik, tambah hentian warna dan tetapkan arah, kemudian salin CSS dalam satu klik.Penjana Border RadiusBulatkan setiap bucu dengan gelongsor, bentuk gumpalan organik dengan mod elips, dan salin CSS serta-merta.Penjana FlexboxSediakan bekas flex dan itemnya dengan kawalan visual, lihat reka letak bertindak balas secara langsung, dan salin CSS dalam satu klik.Penjana CSS GridTetapkan lajur dan baris anda, seret merentasi sel untuk meletakkan item, dan salin CSS grid dengan HTML yang sepadan dalam satu klik.Alat Perkemas & Kecilkan CSSSusun semula inden CSS yang berselerak untuk mudah dibaca, atau kecilkan saiznya untuk dilancarkan — dengan mod selamat yang tidak akan mengubah susunan peraturan anda.Penukar px ke rem & emTukar antara px, rem dan em menggunakan saiz fon akar dan konteks anda sendiri — edit mana-mana medan dan dua medan lain akan dikemas kini semasa anda menaip.