Lewati ke konten
Logo CrateX.app

CrateX.app​

Konverter Satuan CSS

Konverter Satuan CSS

Konverter Satuan CSS membantu mengubah px, rem, em, %, vw, vh, dan pt dengan pengaturan font root, parent, viewport, dan DPI untuk layout responsif.

Pixels​
px
Ketuk untuk menukar satuan

Satuan panjang

Tipografi

Viewport

Persentase

Relatif terhadap ukuran font root
rem
Ketuk untuk menukar satuan

Satuan panjang

Tipografi

Viewport

Persentase
Konverter Satuan CSS

Mulai cepat

1
Masukkan nilai dan satuan: misalnya 16 + px, atau 1 + rem.
2
Pilih satuan Dari dan masukkan nilainya, lalu pilih satuan Ke; gunakan Tukar untuk beralih dengan cepat.
3
Mobile: use the top-right arrow in the drawer to switch between From/To.​
4
Settings are available for rem/em/%/vw/vh; disabled for absolute units.​
5
Lihat hasil: satuan lain dihitung seketika dan dapat disalin.
6
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.

Skenario tambahan

konverter em, satuan viewport, dan kalkulator CSS dapat ditangani dalam alur yang sama agar hasil lebih cepat diperiksa sebelum disalin atau diekspor.

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

Semua pemrosesan dilakukan di peramban Anda; data tidak pernah meninggalkan perangkat.

Pertanyaan umum

4

Lanjutkan langkah berikutnya dengan alat terkait ini.