Langkau ke kandungan
🛠️
Whiz Tools

Pengukur PX ke REM ke EM – Kalkulator Unit CSS Percuma

Tukar piksel ke unit REM dan EM serta-merta. Pengukur unit CSS percuma untuk reka bentuk web responsif. Menyokong saiz fon tersuai dan pengiraan masa nyata untuk keputusan tepat.

Pengubah Unit PX, REM, dan EM

Tukar antara unit piksel (PX), root em (REM), dan em (EM). Masukkan nilai dalam mana-mana medan untuk melihat nilai setara dalam unit lain.

px
px
px
rem
em
Visualisasi tidak tersedia untuk nilai negatif atau sifar

Formula Penukaran

  • PX ke REM: nilai dalam px ÷ saiz fon akar
  • PX ke EM: nilai dalam px ÷ saiz fon induk
  • REM ke PX: nilai dalam rem × saiz fon akar
  • EM ke PX: nilai dalam em × saiz fon induk
Kalkulator Pemuatan...
📚

Dokumentasi

Penukar Unit PX, REM dan EM

Penukar px kepada rem dan em menukar panjang CSS antara piksel (px), em akar (rem) dan em, menggunakan saiz fon akar serta saiz fon elemen induk yang ditetapkan oleh pengguna. Tiga unit ini ialah cara yang paling lazim untuk menetapkan saiz teks dan jarak dalam CSS, iaitu bahasa yang digunakan untuk menggayakan halaman web.

Apakah px, rem dan em?

Piksel (px) ialah unit tetap. Kotak yang ditetapkan selebar 200px kekal selebar 200px tanpa mengira saiz fon yang digunakan oleh halaman.

rem ("em akar") ialah unit yang diskalakan mengikut saiz fon elemen akar halaman, biasanya teg <html>. Kebanyakan pelayar menetapkan saiz fon akar itu kepada 16px melainkan laman mengubahnya. Jika saiz fon akar ialah 16px, maka 1rem bersamaan 16px.

em ialah unit yang diskalakan mengikut saiz fon elemen induk, iaitu elemen yang mengandunginya. Jika elemen induk mempunyai font-size: 20px, maka 1em di dalam elemen induk itu bersamaan 20px.

Perbezaan utama antara rem dengan em ialah perkara yang dijadikan rujukan oleh setiap unit. Rem sentiasa merujuk elemen akar. Em merujuk induk terdekat, jadi nilainya boleh berubah pada setiap peringkat penyarangan.

Cara mengira px kepada rem

Untuk menukar piksel kepada rem, bahagikan nilai piksel dengan saiz fon akar:

r=pRr = \frac{p}{R}

dengan r ialah panjang dalam rem, p ialah panjang dalam piksel dan R ialah saiz fon akar dalam piksel.

Contoh pengiraan

Dengan saiz fon akar lalai 16px, 24px ditukar kepada:

24 ÷ 16 = 1.5rem

Jika laman menetapkan saiz fon akarnya kepada 10px (helah yang lazim, dilakukan dengan menetapkan html { font-size: 62.5%; }, kerana 62.5% daripada 16px ialah 10px), nilai 24px yang sama menjadi:

24 ÷ 10 = 2.4rem

Cara mengira rem kepada px

Untuk menukar dalam arah sebaliknya, darabkan nilai rem dengan saiz fon akar:

p=r×Rp = r \times R

dengan p ialah panjang dalam piksel, r ialah panjang dalam rem dan R ialah saiz fon akar.

Dengan akar 16px, 1.5rem ditukar semula kepada 1.5 × 16 = 24px.

Cara mengira px kepada em

Untuk menukar piksel kepada em, bahagikan nilai piksel dengan saiz fon elemen induk:

e=pPe = \frac{p}{P}

dengan e ialah panjang dalam em dan P ialah saiz fon elemen induk dalam piksel.

Contoh pengiraan

Jika saiz fon elemen induk ialah 20px, maka 24px ditukar kepada:

24 ÷ 20 = 1.2em

Cara mengira em kepada px

Darabkan nilai em dengan saiz fon induk:

p=e×Pp = e \times P

dengan p ialah panjang dalam piksel, e ialah panjang dalam em dan P ialah saiz fon induk.

Dengan induk 20px, 1.2em ditukar semula kepada 1.2 × 20 = 24px.

Cara mengira rem kepada em dan em kepada rem

Oleh sebab rem dan em merujuk saiz fon yang berbeza, penukaran antara kedua-duanya memerlukan saiz fon akar dan saiz fon induk:

e=r×RPe = r \times \frac{R}{P}

r=e×PRr = e \times \frac{P}{R}

dengan R ialah saiz fon akar dan P ialah saiz fon induk.

Contoh pengiraan

Dengan saiz fon akar 16px dan saiz fon induk 20px, 2rem ditukar kepada:

2 × (16 ÷ 20) = 1.6em

Jika saiz fon akar dan induk adalah sama, 1rem sentiasa bersamaan 1em.

Kegunaan setiap unit

Piksel sesuai untuk butiran yang tidak sepatutnya berubah saiz, seperti sempadan 1px atau ikon yang lebarnya tetap.

Rem lazim digunakan untuk jarak dan tipografi yang sepatutnya kekal konsisten di seluruh halaman. Oleh sebab rem sentiasa merujuk saiz fon akar, nilai rem tidak berubah walau sedalam mana elemen disarangkan. Ini juga bermakna susun atur berasaskan rem dilaraskan secara automatik apabila pengguna meningkatkan saiz fon lalai pelayarnya, sekali gus membantu pembaca yang mempunyai penglihatan terhad.

Em sesuai digunakan dalam komponen tunggal yang berdiri sendiri, seperti butang, apabila saiz padding perlu diskalakan bersama-sama saiz fon butang itu sendiri. Masalah lazim em ialah kesan gandaan: jika beberapa elemen bersarang masing-masing menggunakan font-size: 1.2em, setiap peringkat mendarabkan peringkat sebelumnya, menyebabkan saiz fon membesar lebih cepat daripada yang dimaksudkan.

1.level-1 { font-size: 1.2em; }  /* 19.2px, if the parent is 16px */
2.level-2 { font-size: 1.2em; }  /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65px (23.04px × 1.2) */
4

Selepas tiga peringkat, teks membesar kira-kira 73%, bukannya 20% seperti yang mungkin dijangka oleh pembangun daripada satu peraturan 1.2em.

Menggunakan penukar

  1. Masukkan nilai ke dalam medan piksel, rem atau em.
  2. Dua medan yang lain dikemas kini secara automatik, dibundarkan kepada empat tempat perpuluhan.
  3. Tetapkan saiz fon akar supaya sepadan dengan elemen <html> projek. Secara lalai, nilainya ialah 16px dalam kebanyakan pelayar dan ia hanya mempengaruhi rem.
  4. Tetapkan saiz fon induk supaya sepadan dengan saiz fon elemen yang akan mengandungi nilai em. Tetapan ini hanya mempengaruhi em.
  5. Gunakan butang salin di sebelah medan untuk menyalin nilainya.

Kedua-dua medan saiz fon menerima nombor bulat piksel, dan nilai minimum yang dibenarkan ialah 1px. Butang tetapkan semula mengosongkan nilai dan mengembalikan kedua-dua saiz fon kepada 16px.

Di bawah medan, alat ini melukis satu bar bagi setiap unit. Ketiga-tiga bar mewakili panjang fizikal yang sama, jadi lebarnya sama, dan ini menjadi semakan pantas bahawa penukaran itu betul. Bar dilukis mengikut panjang piksel sebenar sehingga 300px; nilai yang lebih panjang dikecilkan supaya muat, jadi nilai 600px dan 900px kedua-duanya berakhir pada 300px. Bar hanya muncul apabila nilai piksel melebihi sifar.

Soalan lazim

Apakah perbezaan antara rem dengan em? Rem sentiasa merujuk saiz fon elemen akar. Em merujuk saiz fon elemen induk terdekat. Nilai rem kekal sama di seluruh halaman; nilai em boleh berubah bergantung pada kedalaman penyarangan elemen.

Mengapakah pelayar menggunakan 16px sebagai saiz fon lalai? 16px telah lama menjadi saiz teks lalai dalam pelayar utama kerana selesa dibaca pada skrin biasa tanpa penggayaan tambahan. Panduan kebolehcapaian web mengesyorkan agar teks boleh dibesarkan sehingga 200% tanpa merosakkan susun atur halaman, dan 16px ialah titik permulaan yang praktikal untuk tujuan itu.

Apakah helah 62.5%? Menetapkan html { font-size: 62.5%; } menukar saiz fon akar lalai 16px kepada 10px, kerana 62.5% daripada 16 ialah 10. Ini memudahkan pengiraan rem, kerana 1.6rem bersamaan 16px dan 2.4rem bersamaan 24px.

Bolehkah nilai px, rem dan em menjadi negatif? Ya, bagi sifat yang menerima panjang negatif, seperti jidar atau transformasi CSS. Padding tidak boleh bernilai negatif dalam CSS; pelayar mengabaikan nilai padding negatif. Penukar ini mengendalikan nilai negatif, tetapi tidak melukis bar untuknya kerana bar tidak mempunyai lebar negatif.

Adakah setiap nilai piksel patut ditukar kepada rem? Tidak semestinya. Sempadan dan butiran halus lain biasanya dikekalkan dalam piksel kerana jarang perlu diskalakan mengikut saiz fon dan boleh kelihatan tidak sekata pada lebar subpiksel. Rem sesuai untuk jarak dan tipografi yang perlu diskalakan mengikut pilihan saiz fon pengguna.

Adakah pemilihan unit mempengaruhi prestasi halaman? Tidak. Pelayar menukar setiap panjang CSS kepada nilai dalaman yang sama semasa susun atur, jadi px, rem dan em dipaparkan pada kelajuan yang sama. Pemilihan antara unit-unit ini mempengaruhi kebolehselenggaraan dan kebolehcapaian, bukan kelajuan.