Lewati ke konten
Logo CrateX.app

CrateX.app​

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.

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.​
Ukuran font induk (basis EM): menentukan nilai em dan % saat acuan yang dipakai adalah ukuran font. Berguna untuk penskalaan tingkat komponen: ubah ukuran font induk untuk memperbesar atau memperkecil seluruh blok secara proporsional.
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 berjalan lokal di browser Anda; data tidak pernah meninggalkan perangkat Anda.

Pertanyaan umum

4

Lanjutkan langkah berikutnya dengan alat terkait ini.