Konversikan px ke rem, em, pt, pica, inci, dan mm menggunakan ukuran font akar, ukuran font induk, dan DPI Anda. CSS menetapkan 1 in = 96 px = 72 pt.
Oleh AdminDisusun dengan alat penulisan berbasis AIDiperbarui Contoh terverifikasi: 7
24px sama dengan 1.5rem dengan fon akar 16 px dan 96 piksel per inci.
| Satuan | Nilai | Definisi |
|---|---|---|
| piksel (px) | 24px | 1 px |
| poin tipografi (pt) | 18pt | 1 pt = 1/72 in |
| pika (pc) | 1.5pc | 1 pc = 12 pt = 1/6 in |
| Inci (in) | 0.25in | 1 in = DPI px |
| Sentimeter (cm) | 0.635cm | 1 cm = 1/2.54 in |
| Milimeter (mm) | 6.35mm | 1 mm = 1/25.4 in |
| seperempat milimeter (Q) | 25.4Q | 1 Q = 0.25 mm |
| em (ukuran fon induk) | 1.5em | 1 em = parent font size |
| rem (ukuran fon akar) | 1.5rem | 1 rem = root font size |
| Persen ukuran fon induk (%) | 150% | 100% = parent font size |
1 px
1 rem = root font size
CSS mengonversi panjang melalui piksel. Rasio satuan absolut tetap: 1 in = 2.54 cm = 96 px = 72 pt = 6 pc; 1 Q adalah seperempat milimeter. Satuan relatif fon bergantung pada halaman: 1 rem adalah ukuran fon akar; saat mengatur font-size, 1 em atau 100% adalah ukuran fon induk. Konverter mengubah ke piksel, lalu membagi dengan piksel per satuan tujuan.
Pengembang antarmuka mengubah piksel desain menjadi rem agar teks dapat mengikuti preferensi huruf pembaca jika ukuran akar menghormatinya: dengan akar bawaan 16 px, 24 px bernilai 1.5 rem. Desainer cetak memakai kolom resolusi; pada 300 DPI, logo 10 mm memerlukan sekitar 118 piksel.
Pada layar, inci CSS belum tentu sama dengan inci terukur. CSS menetapkan 96 px per inci dan piksel acuan dengan sudut pandang sekitar 0.0213°. Kesesuaian dengan penggaris bergantung pada media serta pengaturan cetak yang sesuai.
Dalam rumus, xₛ dan xₜ adalah nilai asal dan tujuan; pₛ dan pₜ adalah piksel per satuan asal dan tujuan. Faktor ini memakai ukuran fon dan kerapatan piksel yang Anda masukkan.
Masukkan nilai, satuan, ukuran huruf akar, dan ukuran huruf induk. Faktor pixel per satuan dipakai dalam x_target = x_source × p_source / p_target. rem memakai ukuran akar; model em dan persen pada alat ini memakai ukuran induk untuk konteks font-size.
root = 16 px; 24 px = 1.5 rem, tetapi root = 20 px; 24 px = 1.2 rem. Hubungan satuan absolut CSS adalah 1 in = 96 CSS px = 72 pt. Kolom kerapatan juga dapat dipakai untuk menghitung pixel fisik, misalnya 10 mm × 300/25.4 px/mm ≈ 118.110236 px.
Desimal panjang dibulatkan dan setiap baris mempertahankan konteks ukuran huruf serta kerapatan yang tertera.
| Jumlah | Satuan asal | Satuan tujuan | Konteks | Nilai hasil |
|---|---|---|---|---|
| 24 | px | rem | Akar 16 px | 1.5 |
| 24 | px | rem | Akar 20 px | 1.2 |
| 12 | pt | px | 96 px/in | 16 |
| 1 | pc | pt | 96 px/in | 12 |
| 100 | % | em | Induk 16 px | 1 |
| 10 | mm | px | 300 px/in | 118.110236 |
100% = 1 em (font-size context) berlaku pada model ukuran huruf di sini. Pada properti CSS lain, em atau persen dapat menggunakan konteks berbeda. Alat ini tidak membaca lembar gaya atau ukuran kotak elemen.
Mengubah kerapatan pixel fisik tidak mengubah definisi pixel CSS. Satu inci CSS pada layar belum tentu sepanjang satu inci pada penggaris. Periksa desain di browser dan saat dicetak. Konverter panjang menangani panjang fisik yang terpisah dari konteks tipografi.
Sumber pemeriksaan: Pemeriksaan menurut CSS Values 3 §6.1: 1rem = ukuran fon akar (nilai awal peramban yang umum 16 px); 24 / 16 = 1.5.
Sumber pemeriksaan: Pemeriksaan menurut CSS Values 3 §6.2: 1pt = 1/72 in, 1in = 96px; 12 × 96/72 = 16.
Sumber pemeriksaan: Pemeriksaan menurut CSS Values 3 §6.2: 1in = 96px.
Sumber pemeriksaan: Pemeriksaan: 1 rem = ukuran fon akar (16 px); 1.5 × 16.
16 piksel dengan pengaturan awal yang umum. Satu rem sama dengan ukuran fon elemen akar html; nilai awal peramban yang umum adalah 16 px, kecuali diubah pengguna atau html { font-size } pada lembar gaya. Dengan nilai awal tersebut, html { font-size: 62.5% } membuat 1 rem = 10 px. Spesifikasi W3C CSS Values and Units mendefinisikan rem; angka 16 px adalah pengaturan peramban, bukan ketentuan spesifikasi.
Kalikan piksel dengan 0.75; dari poin ke piksel, kalikan dengan 4/3 (sekitar 1.333). Keduanya mengikuti aturan CSS W3C: 1 in = 96 px = 72 pt, jadi 1 px = 72/96 pt. Teks isi 16 px adalah 12 pt, dan teks pengolah kata 11 pt sekitar 14.67 px.
rem selalu merujuk ukuran huruf akar; em ke elemen saat ini, atau induk saat dipakai pada font-size. Jadi em bertingkat dikalikan: daftar 1.2em dalam daftar 1.2em menghasilkan teks 1.44 kali dasar awal bersama. Namun 1.2rem tetap 19.2 px dengan akar 16 px, sedalam apa pun.
Gunakan rem agar teks mengikuti preferensi ukuran huruf pembaca, dan biarkan akar menghormatinya. Zum halaman membesarkan px dan rem; rem, em, dan persen dapat mengikuti preferensi melalui konteks akar atau induk. WCAG 2.1 kriteria 1.4.4 (AA) mensyaratkan teks dapat diperbesar hingga 200% tanpa kehilangan isi atau fungsi. Zum bisa memenuhinya dengan px; rem juga dapat mengikuti preferensi bila akar mengizinkan.
Inci CSS belum tentu sama dengan inci yang diukur pada layar. CSS mendefinisikan 1 in tepat 96 px; piksel acuan W3C adalah piksel layar 96 DPI dilihat dari 28 in, bersudut sekitar 0.0213°. Perangkat dan jarak pandang berbeda, sehingga kotak 96 px bisa kurang dari satu inci pada ponsel. Pada cetak ukuran aktual, 1 in = 25.4 mm dapat cocok dengan penggaris; skala cetak dan kalibrasi tetap berpengaruh.
Kalkulator ini mencakup 7 contoh perhitungan dengan jawaban dari sumber independen. Contoh tersebut dijalankan dalam rangkaian pengujian dan dapat Anda jalankan di sini juga.