Generator clamp CSS responsif
Buat nilai CSS clamp() yang menskalakan ukuran font atau jarak dengan mulus di antara dua lebar viewport, dalam px atau rem.
- Berjalan di browser
- Tanpa unggahan
- Hasil tetap di perangkat Anda
Privasi & batasBerjalan di browser Anda. Tidak ada yang diunggah.
Isi input tetap di tab ini; Refentra tidak mengunggah atau menyimpannya. Jumlah tindakan agregat opsional hanya dikirim dengan persetujuan pengukuran penggunaan Anda. Hapus ruang kerja setelah selesai.
Profil yang didukung: Satu unit, px atau rem; 0≤min≤max, 0<awal viewport<akhir. Untuk rem, batas viewport juga rem.
Maksimum 200.000 unit UTF-16; batas parser bisa lebih kecil. Worker: 15 detik (regex 1,5 detik).
Periksa input dan hasil
- Siapkan dan pilih operasi
Pilih px atau rem secara konsisten, ukuran minimum/maksimum, serta lebar viewport tempat interpolasi fluida dimulai dan berakhir.
- Periksa contoh nyata
Coba contoh ini dan bandingkan hasil yang ditunjukkan: min=16 max=32 start=320 end=1280 unit=px → clamp(16px, calc(10.666667px + 1.666667vw), 32px)
- Periksa sebelum memakai hasil
Periksa kedua ujung viewport dan lebar di antaranya; di luar rentang itu, clamp mempertahankan nilai minimum atau maksimum.
Jawaban untuk tugas ini
rem bergantung pada apa?
rem memakai ukuran font akar. Perlakukan satuan viewport dan ukuran secara konsisten, dan uji zoom, jangan berasumsi akarnya selalu 16px.
Apa yang perlu diperiksa jika input ditolak?
Syaratnya 0 ≤ minimum ≤ maksimum dan 0 < viewport awal < viewport akhir; ujung viewport yang sama tidak dapat menentukan kemiringan.
Sampai di mana batas alat ini?
Alat ini menghasilkan ukuran fluida linear, bukan skala tipografi responsif yang lengkap; pemenggalan baris, zoom, dan pengaturan font pengguna tetap perlu diuji.