Konverter Satuan CSS Mengonversi antara px, em, rem, %, vw, vh, vmin, dan vmax dengan ukuran tampilan dan font yang dapat disesuaikan.

⚖️

Konverter Satuan CSS

Mengonversi antara px, em, rem, %, vw, vh, vmin, dan vmax dengan ukuran tampilan dan font yang dapat disesuaikan.

Konfigurasi Konteks

Atur dimensi tampilan, ukuran font dasar, dan ukuran elemen induk.

Masukkan Nilai

Ketik nilai CSS untuk dikonversi.

Pilih Satuan

Pilih satuan sumber dan target CSS.

Loading tool...

What Is Konverter Satuan CSS?

Konverter satuan CSS menerjemahkan berbagai satuan panjang yang tersedia di CSS, mempertimbangkan satuan yang bergantung pada konteks. Satuan tetap (px) selalu merepresentasikan ukuran visual yang sama. Satuan relatif tergantung pada konteks: em dan rem terkait dengan ukuran font, % terkait dengan elemen induk, dan satuan tampilan (vw, vh, vmin, vmax) terkait dengan dimensi jendela browser. Konverter ini memungkinkan Anda untuk mengonfigurasi semua variabel konteks (ukuran tampilan, ukuran font dasar, ukuran induk) untuk konversi yang akurat antara satuan CSS mana pun, membuat perhitungan desain responsif cepat dan presisi.

Why Use Konverter Satuan CSS?

Dimensi tampilan yang dapat disesuaikan untuk perhitungan vw/vh yang akurat.
Ukuran font dasar yang dapat disesuaikan untuk konversi em/rem.
Ukuran elemen induk untuk perhitungan persentase.
Delapan satuan panjang CSS esensial.
Sempurna untuk alur kerja desain responsif.

Common Use Cases

Desain Responsif

Hitung nilai vw untuk tipografi dan tata letak yang fluid.

Desain-ke-Kode

Konversi spesifikasi desain berbasis piksel ke satuan CSS responsif.

Aksesibilitas

Konversi ukuran piksel tetap ke unit rem relatif.

Debug Tata Letak

Pahami bagaimana satuan CSS yang berbeda diterjemahkan ke ukuran piksel sebenarnya.

Technical Guide

Satuan panjang CSS dibagi menjadi dua kategori:

Absolut:
• px: piksel CSS (1/96 inci dalam CSS, tetapi 1 piksel perangkat pada tampilan standar)

Relatif:
• em: relatif terhadap ukuran font elemen. 2em = 2× ukuran font saat ini
• rem: relatif terhadap ukuran font root (elemen html). Lebih dapat diprediksi daripada em
• %: relatif terhadap nilai properti yang sesuai dari elemen induk
• vw: 1% dari lebar tampilan. 100vw = lebar tampilan penuh
• vh: 1% dari tinggi tampilan. 100vh = tinggi tampilan penuh
• vmin: 1% dari dimensi tampilan yang lebih kecil
• vmax: 1% dari dimensi tampilan yang lebih besar

Polanya responsif umum:
• Tipografi fluida: font-size: clamp(1rem, 2vw + 0.5rem, 2rem)
• Bagian penuh tinggi: min-height: 100vh
• Spasi responsif: padding: 5vw

Tips & Best Practices

1
Gunakan rem untuk ukuran font (aksesibilitas). Gunakan px untuk batas dan bayangan (presisi).
2
vmin sangat baik untuk wadah persegi responsif.
3
clamp() dengan satuan vw memungkinkan tipografi fluid tanpa kueri media.
4
100vh pada perangkat mobile mungkin termasuk bilah alamat - gunakan 100dvh (tinggi tampilan dinamis) sebagai gantinya.
5
Jika ragu, mulai dengan rem dan px. Tambahkan vw/vh hanya ketika Anda memerlukan pengaturan ukuran relatif terhadap tampilan.

Related Tools

Konverter Panjang

Ubah antara milimeter, sentimeter, meter, kilometer, inci, kaki, yard, mil, dan mil laut secara instan.

⚖️ Unit Converters

Konverter Luminans

Mengubah antara candela/m², nits, lamberts, dan foot-lamberts.

⚖️ Unit Converters

Konverter Satuan Tipografi

Mengonversi antara px, pt, em, rem, cm, mm, inci, dan pica dengan ukuran font dasar yang dapat disesuaikan.

⚖️ Unit Converters

Konverter Satuan Memasak

Ubah ukuran memasak: cangkir, sendok makan, sendok teh, ons cair, mililiter, liter, gram, ons, dan pon.

⚖️ Unit Converters

Frequently Asked Questions

Q Bagaimana saya mengonversi px ke vw?

Bagi nilai px dengan lebar tampilan dan kalikan dengan 100. Contoh: 192px pada tampilan 1920px = 192/1920 × 100 = 10vw.

Q Apa perbedaan antara vw dan %?

vw selalu relatif terhadap lebar tampilan. % relatif terhadap elemen induk, yang mungkin lebih kecil dari tampilan.

Q Kapan saya harus menggunakan rem vs em?

Gunakan rem untuk pengaturan ukuran konsisten relatif terhadap root (tanpa kejutan cascading). Gunakan em ketika Anda ingin pengaturan ukuran yang skalabel dengan font-size induk terdekat.

Q Apa itu vmin?

vmin sama dengan 1% dari dimensi tampilan yang lebih kecil (lebar atau tinggi). Pada tampilan 1920×1080, 1vmin = 10,8px.

Q Mengapa halaman 100vh memiliki bilah gulir pada perangkat mobile?

Peramban mobile memasukkan bilah alamat dalam perhitungan tinggi tampilan. Gunakan 100dvh (tinggi tampilan dinamis) atau JavaScript untuk mendapatkan tinggi yang terlihat sebenarnya.

About This Tool

Konverter Satuan CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.