Kategori: Alat pengembang
Generator CSS Clamp
Ukuran font cair tanpa media query
Berikan ukuran minimum dan maksimum beserta lebar viewport yang bersesuaian, lalu dapatkan deklarasi clamp() yang berskala mulus di antaranya, lengkap dengan tabel hasil render pada lebar yang umum.
font-size: clamp(1.125rem, 0.7826rem + 1.5217vw, 2rem);
| Lebar viewport | Ukuran terender |
|---|---|
| 360px | 18px |
| 768px | 24.21px |
| 1024px | 28.1px |
| 1280px | 32px |
| 1600px | 32px |
Pratinjau
Tipografi cair tetap terbaca di ponsel dan proporsional di desktop.
Deklarasi dibentuk di halaman. Tidak ada yang diunggah.
Semua yang ada di halaman ini diproses di peramban Anda. Tidak ada yang diunggah.
Apa fungsi alat ini
clamp() menggantikan tumpukan media query yang dulu memindahkan judul melewati empat ukuran. Bagian yang merepotkan adalah suku tengahnya, yang harus berupa garis lurus melalui dua titik Anda: kemiringan dikali viewport ditambah intersep, ditulis sebagai nilai vw yang dijumlahkan dengan nilai rem. Perhitungan itu dikerjakan di sini. Kedua batas tetap dalam rem agar orang yang memperbesar ukuran teks bawaannya tetap mendapat huruf yang lebih besar, dan tabelnya menampilkan ukuran yang benar-benar dirender pada 360, 768, 1024, 1280, dan 1600 piksel. Nilai yang sama juga berlaku untuk padding, gap, dan margin, bukan hanya teks.
Cara memakainya
- Masukkan ukuran terkecil dan lebar viewport tempat ukuran itu berlaku.
- Masukkan ukuran terbesar dan lebar tempat pertumbuhannya berhenti.
- Salin deklarasi clamp() dan periksa tabel pratinjau.
Privasi
Alat ini berjalan sepenuhnya di peramban Anda. Masukan Anda tidak pernah diunggah, disimpan, atau dibagikan — menutup tab akan menghapusnya.
Pertanyaan yang sering diajukan
- Mengapa batasnya dalam rem, bukan px?
- Ukuran yang hanya memakai satuan viewport mengabaikan pengaturan ukuran teks peramban, dan itu cacat aksesibilitas. Batas dalam rem mengikuti setelan bawaan tiap pengunjung.
- Bisakah dipakai untuk jarak antar elemen?
- Bisa. Nilainya hanyalah panjang, jadi berlaku untuk padding, margin, gap, width, dan properti lain yang menerima panjang.
- Apakah ada yang dikirim ke server?
- Tidak. Deklarasi dihitung di halaman dari angka yang Anda ketik, itu sebabnya hasilnya berubah seketika.