Konverter Unit CSS

Kenapa unit CSS bisa sebanyak ini

Unit panjang di CSS terbagi dua kelompok besar: unit absolut dan unit relatif. Unit absolut (px, pt, cm, dll) nilainya tetap, sedangkan unit relatif (rem, em, %, vw, dll) dihitung berdasarkan sesuatu yang lain. Di web responsif, ukuran perlu menyesuaikan layar dan preferensi pengguna, makanya unit relatif jadi pilihan yang lebih sering dipakai.

• Unit absolut: px, pt, pc, in, cm, mm
• Unit relatif (berbasis font): rem, em, %
• Unit relatif (berbasis layar): vw, vh, vmin, vmax

Cara tool ini mengonversi nilai

Nilai yang kamu masukkan pertama-tama diubah ke px, baru dari px itu dihitung ulang ke setiap unit lainnya. Karena itu, mau input dalam unit apa pun, semua unit lain langsung terisi bersamaan. Tidak perlu tombol hitung — begitu nilai berubah, hasil langsung diperbarui.

• Konversi ke px = nilai × (px per 1 unit)
• rem ditentukan oleh ukuran font root, em dan % ditentukan oleh ukuran font elemen
• vw/vh ditentukan oleh ukuran viewport

Bedanya px, rem, dan em

px adalah piksel tetap, rem adalah kelipatan dari ukuran font root (elemen html), dan em adalah kelipatan dari ukuran font elemen itu sendiri (atau induknya) — bukan dari root. Dari sisi aksesibilitas, kalau pengguna memperbesar ukuran font di browser, rem dan em ikut membesar sedangkan px tetap diam, makanya rem umumnya direkomendasikan untuk ukuran teks. Di tool ini rem dihitung dari kolom ukuran font root, sementara em dihitung dari kolom ukuran font elemen — kalau kedua kolom itu diisi angka yang berbeda, nilai rem dan em untuk ukuran px yang sama juga akan berbeda.

• px: selalu tetap, mengabaikan pengaturan pengguna
• rem: font root × nilai (dengan basis 16px, 1rem = 16px)
• em: font elemen × nilai (kalau font elemen 20px, 1em = 20px)

% itu persen dari apa

Nilai % di CSS artinya berbeda-beda tergantung propertinya. % pada font-size mengacu ke ukuran font induk, % pada width mengacu ke lebar induk, dan % pada line-height mengacu ke ukuran font elemen itu sendiri. Untuk keperluan konversi berbasis font, tool ini menghitung % relatif terhadap ukuran font elemen/induk yang kamu isi (100% = ukuran font elemen), sama seperti basis yang dipakai em.

vw, vh, vmin, vmax — unit berbasis layar

Unit viewport dihitung dari ukuran layar browser, bukan dari ukuran font sama sekali. 1vw sama dengan 1% dari lebar layar, 1vh sama dengan 1% dari tinggi layar, vmin mengambil sisi yang lebih pendek, dan vmax mengambil sisi yang lebih panjang. Karena itu, mengubah lebar atau tinggi viewport di tool ini langsung mengubah hasil vw dan vh, tanpa terpengaruh kolom font root maupun font elemen.

• 1vw = lebar viewport ÷ 100
• 1vh = tinggi viewport ÷ 100
• vmin/vmax = sisi terpendek/terpanjang ÷ 100

pt, pc, in, cm, mm — unit fisik

Di CSS, unit fisik dikonversi ke layar memakai patokan 96px = 1in. Artinya 1in = 96px, 1cm ≈ 37,8px, 1mm ≈ 3,78px, 1pt = 1/72in ≈ 1,333px, dan 1pc = 12pt = 16px. Unit ini paling sering dipakai untuk stylesheet cetak, tapi tetap dikonversi dengan rasio yang sama saat ditampilkan di layar, dan tidak bergantung pada font root maupun font elemen.

• 1in = 96px
• 1pt = 96/72 ≈ 1,333px
• 1pc = 16px, 1cm ≈ 37,8px, 1mm ≈ 3,78px

Contoh hitung dengan font root 16px

Ukuran font default kebanyakan browser adalah 16px. Jadi kalau font root 16px, 24px diubah ke rem hasilnya 24 ÷ 16 = 1,5rem. Kalau di tool ini ukuran font root diganti jadi 20, angka 24px yang sama akan dihitung ulang jadi 1,2rem. Untuk em ceritanya beda: kalau font elemen 16px, 24px sama dengan 1,5em juga, tapi kalau font elemen-nya 20px, 24px justru jadi 1,2em — jadi em selalu mengikuti kolom font elemen, terlepas dari berapa pun angka di kolom font root.

Kapan pakai unit apa di desain responsif

Tidak ada aturan mutlak, tapi ada kebiasaan umum yang bisa dijadikan patokan: ukuran teks sebaiknya pakai rem agar menghormati pengaturan pengguna dan tetap konsisten terhadap root, jarak/margin bisa pakai rem atau px, lebar elemen cocok pakai % atau unit viewport, dan teks besar seperti judul hero sering memakai kombinasi clamp() dengan vw. Untuk breakpoint media query, em masih umum dipakai — biasanya relatif ke font root browser.

• Ukuran teks: rem (aksesibilitas)
• Jarak/margin: rem atau px
• Lebar layout: % atau vw
• Ukuran fluid: clamp() + vw

Kesalahan umum dan batasannya

em bisa menumpuk kalau bersarang di dalam elemen lain yang juga pakai em, sehingga hasilnya membesar atau mengecil di luar dugaan — makin dalam nestingnya, makin jauh dari ukuran font elemen awal. Ukuran font default browser juga tidak selalu 16px kalau pengguna mengubahnya di pengaturan, dan ukuran unit fisik di layar tidak selalu sama persis dengan DPI layar sebenarnya. Hasil dari tool ini juga dibulatkan supaya rapi, jadi kalau butuh presisi penuh dan angkanya tidak pas ke bilangan bulat, lebih aman memakai nilai desimal rem/em apa adanya daripada px yang sudah dibulatkan.

• em bersarang bisa menumpuk nilainya
• font root/elemen default browser bisa diubah pengguna
• unit fisik di layar hanya perkiraan
• ada pembulatan desimal pada hasil

Salin nilai dan langsung pakai

Arahkan kursor atau fokus ke salah satu kartu unit untuk memunculkan tombol salin. Klik tombol itu dan string lengkap seperti "1,5rem" langsung tersalin ke clipboard, siap ditempel ke kode CSS kamu. Preview ukuran di bawahnya menampilkan bar penggaris 1:1 dengan panjang piksel yang sebenarnya plus contoh teks pada ukuran aslinya (untuk nilai yang sangat besar, contoh teksnya diperkecil tampilannya dengan keterangan ukuran asli). Kalau kamu atur dulu font root, font elemen, dan viewport sesuai proyekmu, semua konversi berikutnya otomatis memakai patokan itu.

• Salin kartu unit = nilai + unit
• Atur font root/elemen/viewport lebih dulu
• Pakai tombol contoh untuk cek sampel 24px