Lewati ke konten
Konverter Waktu Kickoff Piala Dunia sudah tersediaLihat kickoff dalam zona waktu Anda dan tambahkan pengingat kalender.
Logo CrateX.app

CrateX.app​

Konverter Satuan CSS

Konversikan unit CSS satu-ke-satu antara px, rem, em, %, vw, vh, vmin, vmax, pt, cm, mm, q, ex, dan ch secara lokal dengan ukuran font root, ukuran font induk, area pandang, DPI, dan pengaturan referensi persen.

Piksel
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 pilih satuan Dari
2
Pilih satuan Ke atau gunakan Tukar untuk membalik
3
Atur konteks rem/em/%/vw/vh bila perlu
4
Salin hasil konversi
5
Ganti preset viewport untuk memeriksa vw/vh

Skenario umum

Kasus penggunaan

tata letak responsif, handoff desain-ke-dev, korelasi kepadatan/cetak, serta penyatuan konvensi gaya.

Saran penggunaan

Tetapkan basis: root 16px adalah hal biasa, membuat matematika mental rem ↔ px menjadi mudah
Gunakan rem untuk teks: mendukung penskalaan global dan aksesibilitas; gunakan em untuk penskalaan lokal komponen
Gunakan unit area pandang untuk perkiraan tata letak: gabungkan dengan titik henti sementara dan batasan min/maks untuk menghindari hal ekstrem
Desimal dan pembulatan: pertahankan presisi wajar agar angka tetap mudah dibaca

Parameter dan konteks

Basis REM (ukuran font root): menentukan konversi rem ↔ px. 16px umum di web dan mudah dihitung (1rem≈16px). Sesuaikan sementara jika desain tidak memakai basis 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.
Ukuran viewport: digunakan untuk vw/vh/vmin/vmax dan % saat acuan adalah lebar/tinggi. Perangkat nyata dapat berbeda karena bilah alamat, safe area, dan scrollbar.
DPI (titik per inci): untuk satuan fisik pt/pc/in/cm/mm/q ↔ px. Perkiraan default CSS adalah 96 DPI; nilai khusus adalah perkiraan cetak/perangkat dan bukan perhitungan tata letak akhir browser.
Tip: 1) 16px dan 96 DPI adalah basis umum; 2) memverifikasi persentase tata letak dengan mengganti breakpoint; 3) kontrol ini membantu estimasi waktu desain dan tidak menggantikan komputasi akhir DOM/CSS browser.

Batasan & kompatibilitas

Referensi % bergantung pada properti CSS, yang berisi blok, dan mode tata letak; alat ini menggunakan referensi ukuran font/lebar viewport/tinggi viewport yang dipilih untuk estimasi, bukan pengukuran induk/kontainer langsung
ex/ch adalah perkiraan berdasarkan ukuran font induk di sini; hasilnya bukan pemeriksaan metrik font dan bervariasi antar font/browser
Vw/vh/vmin/vmax klasik bervariasi menurut bilah gulir/bilah alamat/area aman; alat ini tidak menghitung unit kueri dvh/svh/lvh, vi/vb, area aman, atau kontainer
Unit fisik ↔ px menggunakan perkiraan DPI yang dikonfigurasi; pekerjaan print/HiDPI masih memerlukan validasi perangkat atau bukti

Privasi & keamanan

Pemrosesan berjalan di browser. Nilai input, satuan From/To, nilai cache per satuan, ukuran font root, ukuran font induk, viewport, DPI, referensi persentase, dan pilihan breakpoint dapat tetap berada di sesi browser saat ini atau di penyimpanan browser. Jika Anda menyimpan ruang kerja atau mengaktifkan sinkronisasi WebDAV, nilai tersebut dapat disimpan sesuai pengaturan sinkronisasi Anda. Hasil konversi dihitung ulang dari nilai, satuan, dan pengaturan konteks saat ini, dan tidak disimpan sebagai hasil terpisah. Halaman ini tidak mengambil URL dan tidak mengirim nilai untuk konversi sisi server. Di perangkat bersama, hapus nilai, pengaturan, dan data situs bila diperlukan.

Pertanyaan umum

4

Lanjutkan langkah berikutnya dengan alat terkait ini.

Sumber daya

Panduan

Tentang

Tentang kami
Harga

Legal​

Ketentuan
Kebijakan privasi
Kebijakan cookie

Preferensi

Kelola Cookie

Seluruh pemrosesan alat terjadi secara lokal di browser Anda.