Konverter Satuan CSS

Mendukung konversi antara unit CSS seperti px, em, rem, %, vw, vh, menyediakan pengaturan breakpoint responsif. Secara otomatis menghitung nilai yang bergantung pada konteks, cocok untuk pengembangan tata letak responsif, implementasi frontend, dan adaptasi gaya.

Panduan penggunaan

🚀 Mulai cepat

Masukkan nilai dan satuan: misalnya 16 + px, atau 1 + rem.
Pilih satuan Dari dan masukkan nilainya, lalu pilih satuan Ke; gunakan Tukar untuk beralih dengan cepat.
Mobile: use the top-right arrow in the drawer to switch between From/To.
Settings are available for rem/em/%/vw/vh; disabled for absolute units.
Lihat hasil: satuan lain dihitung seketika dan dapat disalin.
Breakpoint: beralih antara preset mobile/tablet/desktop untuk memvalidasi konversi di berbagai ukuran layar.

📌 Skenario umum

Use case: tata letak responsif, handoff desain‑ke‑dev, korelasi kepadatan/cetak, serta penyatuan konvensi gaya.

🧭 Saran penggunaan

Set a base: 16px root is common, making rem ↔ px mental math easy
Prefer rem for text: enables global scaling and a11y; use em for component‑local scaling
Use viewport units for layout: combine with breakpoints and clamps to avoid extremes
Decimals & rounding: keep reasonable precision to avoid unreadable numbers

🎛️ Parameters & Context

REM base (Root Font Size): determines rem ↔ px conversion. 16px is common on the web, making mental math easy (1rem≈16px). Adjust temporarily when a design isn’t based on 16px.
EM base (Parent Font Size): determines em and % (when reference is Font size). Useful for component‑local scaling: change parent font size to scale the block.
Acuan %: pilih Ukuran font / Lebar / Tinggi sebagai referensi. Untuk tata letak gunakan Lebar/Tinggi; untuk tipografi (mis. line-height) gunakan Ukuran font.
Prasetel breakpoint: Mobile / Tablet / Desktop / Lebar juga mengatur ukuran viewport untuk memperkirakan tampilan di berbagai lebar. Hanya untuk estimasi, bukan media query di runtime.
Viewport size: used for vw/vh/vmin/vmax and % (when reference is width/height). Real devices may differ due to address bars, safe areas, and scrollbars.
DPI (dots per inch): for physical units pt/pc/in/cm/mm/q ↔ px. Default web assumption is 96 DPI; for print/HiDPI set to device value, otherwise treat as approximation.
Tips: 1) 16px and 96 DPI are common bases; 2) verify layout percentages by switching breakpoints; 3) these controls help design‑time estimation and don’t replace the browser’s final DOM/CSS computation.

⚠️ Batasan & kompatibilitas

Acuan % bergantung pada propertinya (lebar/tinggi/line-height dapat berbeda); alat ini hanya memperkirakan kasus yang umum.
ex/ch bergantung pada metrik font; hasilnya bisa berbeda antar font dan peramban.
Viewport units vary with scrollbars/address bars/safe areas; expect small discrepancies
Physical units ↔ px vary with DPI; print/HiDPI devices require validation

🔒 Privasi & keamanan

All processing happens in your browser; data never leaves your device

❓ Pertanyaan umum

What’s the difference between rem and em?

rem is relative to the root font size (predictable global scaling); em is relative to the parent (great for component‑local scaling)

Should I use px or rem?

Prefer rem for layout and text (a11y); px is fine for crisp icons/borders

Why do vw/vh behave differently across devices?

Mobile address bars/safe areas/scrollbars affect the viewport; combine with clamp()/min()/max() and breakpoints

Bagaimana cara mengonversi piksel layar ke satuan cetak?

Set DPI (e.g. 96/72/300). Screen→print here is an estimate only; proof with ICC workflows for production