Desain / Responsif
Generator CSS Clamp() untuk Tipografi dan Spasi Fluid
Masukkan ukuran terkecil dan terbesar serta lebar viewport yang menerapkan masing-masing ukuran, lalu dapatkan ekspresi clamp() dalam rem yang berubah mulus di antaranya, lengkap dengan tabel ukuran pada lebar layar umum.
Generator CSS Clamp() untuk Tipografi dan Spasi Fluid: Tool ini membuat garis lurus melalui dua titik: dari 16 px pada viewport 320 px hingga 24 px pada 1280 px, ukurannya bertambah 0,8333 px setiap lebar bertambah 100 px. Garis ini ditulis sebagai bagian rem tetap ditambah bagian vw, 0.8333rem + 0.8333vw, dan clamp() menjaganya tetap di antara 1rem dan 1.5rem di luar rentang tersebut. Berjalan 100% lokal di browser Anda tanpa upload file ke server.
- Kategori
- Tools developer
- Dijalankan
- Di browser Anda
- Biaya
- Gratis · tanpa daftar
- Ketersediaan
- Siap digunakan
Berjalan sepenuhnya di browser Anda
CSS
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
| Lebar viewport | Ukuran |
|---|---|
| 320 px | 16 px |
| 375 px | 16,46 px |
| 768 px | 19,73 px |
| 800 px | 20 px |
| 1024 px | 21,87 px |
| 1280 px | 24 px |
| 1440 px | 24 px |
| 1920 px | 24 px |
Nilai tengah clamp() adalah garis lurus melalui dua titik yang Anda berikan: nilai ini menambahkan jumlah rem tetap ke sebagian lebar viewport, sehingga ukuran berubah secara mulus di antara kedua lebar tersebut dan berhenti pada batas di luarnya. Penggunaan rem untuk bagian tetap membuat ukuran tetap responsif terhadap pengaturan font-size pembaca. Ini berlaku untuk panjang apa pun: ukuran font, padding, jarak, atau margin.
Contoh perhitungan
Untuk heading berukuran 32 px pada ponsel 375 px dan 48 px pada desktop 1440 px, kemiringannya adalah 16 ÷ 1065 = 1,5023 px per 100 px, dan ekspresinya adalah clamp(2rem, 1.6479rem + 1.5023vw, 3rem). Pada tablet 800 px, ukuran heading tersebut adalah 38,38 px.
Aksesibilitas
WCAG mengharuskan teks dapat diperbesar hingga 200%. Karena sebagian ukuran fluid bergantung pada viewport, kemiringan yang sangat curam dapat membuat zoom tidak memperbesar teks secara signifikan; jaga agar ukuran terbesar tidak lebih dari sekitar 2,5 kali ukuran terkecil, dan gunakan generator skala tipografi untuk memilih langkah yang konsisten.
Cara menggunakannya
- Masukkan ukuran terkecil dan terbesar dalam px.
- Masukkan lebar viewport tempat ukuran tersebut diterapkan.
- Salin nilai clamp() dan periksa ukurannya di tabel.
Privasi & batasan
Dihitung di browser Anda.
Alat terkait
Pertanyaan umum
Mengapa tidak cukup menggunakan vw?
Ukuran yang hanya menggunakan vw mengabaikan pengaturan font-size pembaca dan dapat menjadi sangat kecil di ponsel atau sangat besar di layar lebar. Bagian rem dan batas dalam clamp() mengatasi keduanya.
Apakah clamp() berfungsi di semua browser?
Ya: semua browser modern telah mendukung clamp() sejak 2020.
Bisakah ukurannya menjadi lebih kecil pada layar yang lebih lebar?
Ya: masukkan ukuran yang lebih besar untuk lebar terkecil, dan ekspresinya akan mengurangkan bagian vw.
Alat gratis · berjalan di browser anda · tanpa perlu akun