Konverter warna
Konversi HEX, RGB, dan HSL beserta transparansi, lihat contoh warna, dan salin nilai CSS.
Pembuat ukuran font responsif dengan clamp()
Hitung font-size: clamp() dari batas ukuran font dan lebar viewport, dengan keluaran px atau rem serta pratinjau.
rem dihitung dari ukuran font akar yang diisi. Pada halaman akhir, periksa juga zoom browser dan pengaturan teks besar.
Ukuran huruf yang nyaman membuat setiap kalimat lebih mudah dibaca.
CSS
Tentang alat ini
Tentukan ukuran judul untuk ponsel dan komputer lalu periksa peralihannya.
Cara menggunakan
Isi ukuran font minimum dan maksimum beserta lebar viewport yang sesuai. Pilih px atau rem, geser lebar simulasi, lalu salin atau unduh deklarasi CSS. Lebar harus berurutan dari kecil ke besar dan ukuran minimum tidak boleh melebihi maksimum.
Font berubah secara linear di antara lebar yang ditentukan dan tetap dalam batas ukuran di luar rentang itu. Untuk rem, sesuaikan ukuran font akar dengan halaman tujuan. Rumus memakai lebar viewport, bukan lebar kontainer, dan tidak mengubah pengaturan tipografi lainnya.
Pertanyaan umum
Mengapa ukuran root diperlukan untuk rem?
Pratinjau memakainya untuk mengubah rem ke piksel. Samakan ukuran huruf elemen root dengan halaman Anda. Rumus mengikuti lebar viewport browser; ukuran huruf root yang berbeda mengubah hasilnya.
Bagaimana membuat ukuran 16px di ponsel dan 32px di desktop?
Untuk 16px pada viewport 400px dan 32px pada 1200px, pilih px lalu masukkan kedua pasangan ukuran itu. Hasilnya clamp(16px, 8px + 2vw, 32px): pada 800px ukurannya 24px, sedangkan di luar rentang nilainya dibatasi minimum dan maksimum. Perhitungan mengikuti lebar viewport, bukan kontainer.
Alat terkait
Dibuka di tab baru
Komentar
0