Kalkulator CSS clamp
Dengan kalkulator CSS clamp ini, Anda mengubah nilai minimum, maksimum, dan rentang viewport menjadi ekspresi clamp() siap pakai untuk ukuran font, jarak, dan lebar tanpa media query.
Contoh: Properti CSS: font-size · Nilai terkecil (ponsel) 16 px · Nilai terbesar (desktop) 24 px · Mulai dari lebar viewport 320 px · Sampai lebar viewport 1.280 px · Ukuran font dasar (rem) 16 px → CSS: font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);. Sumber: MDN – CSS clamp(): clamp(MIN, VAL, MAX). Diperbarui: .
Cara menghitung
clamp(MIN, NILAI, MAKS) membatasi nilai dari bawah dan atas. Untuk teks yang membesar dari 16 ke 24 px di antara lebar viewport 320 px dan 1280 px, bentuknya: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem).
Cara menghitung
Di antara dua lebar viewport, nilai naik secara linear. Kemiringannya (maks − min) / (viewportmaks − viewportmin), titik potongnya min − kemiringan · viewportmin. Titik potong ditulis dalam rem dan kemiringan dalam vw, sehingga ukuran font browser yang diperbesar pengguna tetap diperhitungkan. Tabel menunjukkan nilai pada perangkat yang umum.
Perlu diketahui
- Ukuran font yang hanya memakai vw tanpa bagian rem hampir tidak bisa diperbesar dengan zoom; karena itu ekspresinya memuat bagian rem.
- clamp() juga berfungsi untuk padding, margin, gap, dan width – di mana pun panjang diizinkan.
- Semua browser terkini mendukung clamp() (sejak 2020).
Pertanyaan umum
Bagaimana menghitung clamp() untuk ukuran font?
Masukkan ukuran minimum dan maksimum dalam px serta lebar viewport. Kalkulator membentuk nilai pilihan dari rem dan vw lalu menempatkannya di antara minimum dan maksimum.
Mengapa ekspresinya memuat bagian rem?
Nilai hanya dalam vw mengabaikan ukuran font browser. Dengan bagian rem, teks tetap ikut menyesuaikan bagi pengguna yang memakai font bawaan lebih besar.
Bisakah clamp() dipakai untuk jarak?
Bisa, untuk properti CSS apa pun yang menerima panjang, seperti padding, margin, gap, atau width.
Apa arti 1.5rem di bagian akhir?
Nilai maksimum: di atas lebar viewport atas, teks berhenti membesar. Pada basis 16 px, 1,5 rem tepat 24 px.
Sumber dan dasar hukum
- MDN – CSS clamp(): clamp(MIN, VAL, MAX)
- W3C – CSS Values and Units Module Level 4: Mathematical Expressions (min(), max(), clamp())
- W3C WCAG 2.2 – Success Criterion 1.4.4 Resize Text (teks harus dapat diperbesar hingga 200 %)
Diperbarui: · Kebijakan editorial
Alat terkait
- Konversi px ke remKonversi px ke rem dengan ukuran dasar Anda sendiri, plus em, pt, persen, dan vw, serta tabel ukuran font umum untuk rujukan. Gratis dan tanpa mendaftar.
- CSS gradient generatorCSS gradient generator: buat gradasi warna linear, radial, atau conic dengan banyak color stop, sudut, dan warna cadangan – pratinjau langsung, CSS siap salin.
- CSS box shadow generatorBuat box shadow CSS dengan slider: beberapa lapisan, offset, blur, spread, warna dengan alfa, inset dan preset – pratinjau langsung dan salin CSS sekali klik.
- CSS border radius generatorBuat sudut membulat CSS dengan slider: semua sudut sekaligus atau satu per satu, px atau %, sintaks elips 8 nilai – kode terpendek, pratinjau langsung, salin.
- Kombinasi font – pasangan font untuk judul dan teksKombinasi font untuk judul dan teks: pratinjau langsung, CSS siap salin, dan ketersediaan di Windows, Mac, iPhone, dan Android – hanya memakai font sistem.
- Cek kontras warna (WCAG 2.2)Cek kontras warna teks dan latar belakang: rasio kontras WCAG 2.2 dengan penilaian AA/AAA untuk teks normal, teks besar dan komponen UI, plus saran warna.
- Cek IP address sayaCek IP address Anda secara instan: menampilkan IP publik Anda, mendeteksi apakah IPv4 atau IPv6, dan menjelaskan bedanya. Gratis, IP Anda tidak disimpan.
- Decode JWT: baca dan verifikasi JSON Web TokenDecode JWT untuk melihat header, payload, dan masa berlaku (exp, iat, nbf). Verifikasi tanda tangan dengan secret atau kunci publik. Semua di browser Anda.
- Generator cron: buat dan jelaskan ekspresi cronGenerator cron dan penjelas: susun atau tempel ekspresi, baca artinya dalam bahasa mudah, lihat jadwal berikutnya. Unix, Spring, dan Quartz, lokal di browser.