Konverter Unit CSS
Ubah ukuran teks, border, radius, jarak, ukuran layout, dan shadow menjadi nilai CSS yang siap disalin.
Input dasar
Bandingkan unit panjang CSS dengan ukuran font root dan ukuran viewport dalam satu panel.
Dasar untuk rem, em, dan %. Default browser biasanya 16px.
Panel hasil
Lihat nilai dasar, unit relatif, unit viewport, dan unit absolut dalam satu layar.
font-size: 0rem;Template per properti
Setiap kartu bisa memakai ukuran dan unit sendiri. Kosongkan jika ingin memakai nilai konversi utama.
font-size: 0rem;line-height: 0;border-width: 0px;border-radius: 0rem;padding: 0rem;width: clamp(0rem, 0vw, 0rem);inset: 0rem;box-shadow: 0 0 0 currentColor;Pratinjau
Bandingkan teks, border, radius, spasi, dan gap sebelum menempelkan CSS.
Teks dasar
Masukkan nilai untuk pratinjau
Panduan konversi unit CSS
Angka px baru jelas kalau dasarnya jelas
Konverter ini mengubah nilai yang kamu masukkan ke px terlebih dahulu, lalu membandingkannya dengan rem, em, %, vw, vh, vmin, vmax, dan unit absolut CSS dalam satu layar. Tool ini juga membuat deklarasi untuk font-size, line-height, border-width, radius, padding, gap, width, dan box-shadow, jadi kamu bisa mengecek dasar ukurannya sebelum menempelkan kode.
Mulai dari ukuran font dasar dan unit saat ini
Tool ini diperbarui langsung. Saat ukuran font dasar, nilai, unit, viewport, atau properti CSS berubah, kartu hasil, template properti, dan pratinjau ikut berubah tanpa tombol hitung terpisah.
- Atur ukuran font dasar sesuai ukuran root proyek. 16px cocok untuk banyak default browser, tetapi sistem desain 10px atau 14px harus memakai nilai itu dulu.
- Masukkan nilai dan unit saat ini. Kamu bisa mulai dari px, rem, em, %, vw, vh, vmin, vmax, in, cm, mm, pt, atau pc.
- Sesuaikan lebar dan tinggi viewport dengan layar yang sedang dicek. vw, vh, vmin, dan vmax berubah mengikuti dua nilai ini.
- Pilih properti CSS, lalu baca panel hasil atau template properti. Gunakan tombol salin saat deklarasi sudah sesuai.
rem, em, %, vw, dan vh memakai dasar yang berbeda
Nilai 24px yang sama bisa membesar dengan cara berbeda tergantung unitnya. Gunakan rem saat ukuran mengikuti skala root, em saat mengikuti konteks komponen, dan unit viewport saat ukuran jendela browser menjadi patokan.
px
Nilai kerja utama. Tool mengubah setiap input ke px terlebih dahulu, lalu membaginya kembali ke unit lain.
rem · em · %
Dihitung dari ukuran font dasar yang kamu masukkan. Di CSS asli, rem mengikuti root, em mengikuti konteks lokal, dan % bergantung pada properti.
vw · vh · vmin · vmax
Dihitung dari lebar dan tinggi viewport. Cek ulang untuk mobile, desktop, dan perubahan orientasi.
Unit absolut dan perkiraan
in, cm, mm, pt, dan pc mengikuti relasi panjang CSS. ch≈ dan ex≈ hanya perkiraan cepat karena tiap font berbeda.
Perhitungan selalu melewati px dulu
Apa pun unit inputnya, nilai dikonversi dulu ke px. Setelah itu nilainya dibagi dengan ukuran font dasar, ukuran viewport, atau relasi panjang absolut CSS. Jika base atau viewport keliru, hasil rem, %, vw, dan vh ikut meleset.
Contoh 24px terbaca sebagai font-size: 1.5rem
Dengan ukuran dasar 16px, nilai 24px menghasilkan 24px, 1.5rem, 1.5em, dan 150%. Pada viewport 1366×900, nilai yang sama juga tampil sekitar 1.757vw dan 2.6667vh.
Pratinjau dipakai untuk membaca gambaran ukuran
Pratinjau membatasi ukuran yang terlalu kecil atau terlalu besar supaya panel tetap mudah dibaca. Setelah CSS disalin, tetap cek dengan font, elemen induk, dan breakpoint yang sebenarnya.
Sebelum ditempel, cek lagi patokannya
Konversi unit memberi angka, tetapi tampilan akhir tetap dipengaruhi elemen induk, font, viewport, dan dasar relatif dari properti yang dipakai.
- em bisa menumpuk. Tombol di dalam kartu bisa sulit ditebak jika ukuran font induknya berubah.
- % bergantung pada properti. 150% pada font-size dan 150% pada width tidak merujuk ke hal yang sama.
- vw dan vh terasa berbeda di mobile. UI browser dan orientasi layar dapat mengubah viewport yang dipakai.
- Unit absolut bukan penggaris fisik. Ini relasi CSS terhadap px; kebutuhan cetak atau ukuran fisik perlu dicek terpisah.
Pertanyaan umum
Bolehkah ukuran dasar tetap 16px?
Boleh, jika proyek mengikuti ukuran root default browser. Jika html memakai 10px atau 14px, ubah dulu base di tool agar hasil rem dan % sesuai.
Mengapa rem dan em menunjukkan angka yang sama di sini?
Tool memakai ukuran font dasar yang sama untuk menampilkan keduanya berdampingan. Di CSS asli, rem mengikuti root, sedangkan em mengikuti elemen saat ini atau induknya.
Perlukah menghitung ulang vw dan vh setelah ukuran layar berubah?
Ya. vw memakai lebar viewport dan vh memakai tinggi viewport, jadi hasilnya terasa berbeda antara mobile, desktop, dan orientasi layar.
Mengapa ch≈ dan ex≈ diberi tanda perkiraan?
ch dan ex dipengaruhi font yang aktif. Tool memakai setengah dari ukuran font dasar sebagai pembanding cepat, jadi tipografi final tetap perlu dicek dengan font asli.