Lewati ke konten
Logo CrateX.app

CrateX.app​

Konverter Satuan CSS

Konversikan unit CSS satu-ke-satu antara px, rem, em, %, vw, vh, vmin, vmax, pt, pc, in, cm, mm, q, ex, dan ch secara lokal menggunakan ukuran font root, ukuran font referensi EM, area pandang, dan pengaturan referensi persentase. Unit absolut CSS menggunakan rasio tetap 1in = 96px.

px
Ketuk untuk menukar satuan

Satuan panjang

Tipografi

Viewport

Persentase

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 root/referensi EM/%/viewport sesuai kebutuhan; untuk EM, gunakan ukuran font yang sebenarnya dipakai properti.
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 referensi EM: masukkan ukuran font yang benar-benar digunakan oleh properti. em biasanya menggunakan ukuran font terhitung elemen saat ini; untuk font-size dan properti serupa yang relatif terhadap font, gunakan ukuran font induk. Referensi ini juga digunakan untuk perkiraan ex/ch dan untuk % saat Ukuran font dipilih.
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.
Tip: 1) 16px adalah referensi root dan EM yang umum, tetapi gunakan ukuran font yang benar-benar digunakan oleh properti; 2) verifikasi persentase tata letak dengan mengganti breakpoint; 3) kontrol ini membantu perkiraan pada tahap desain dan tidak menggantikan komputasi akhir DOM/CSS browser. Unit absolut selalu menggunakan 1in = 96px.

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 referensi EM di sini; hasilnya bukan pemeriksaan metrik font dan bervariasi antarfont dan 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
Konversi unit absolut CSS menggunakan rasio tetap 1in = 96px. Menghubungkan piksel fisik layar dengan ukuran cetak memerlukan alur kerja perangkat/cetak terpisah yang tidak disediakan oleh alat ini.

Privasi & keamanan

Pemrosesan berjalan di browser Anda. Nilai input, satuan From/To, nilai cache per satuan, ukuran font root, ukuran font referensi EM, area pandang, 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, serta tidak disimpan sebagai hasil terpisah. Halaman ini tidak mengambil URL atau 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.

Tentang

Tentang kami
Harga

Legal​

Ketentuan
Kebijakan privasi
Kebijakan cookie

Preferensi

Kelola Cookie

Seluruh pemrosesan alat terjadi secara lokal di browser Anda.