Apa yang dilakukan alat ini
Penukar px ke rem & em menukar nilai piksel (px) kepada rem dan em, serta sebaliknya. Anda boleh memasukkan nilai dalam mana-mana satu daripada tiga unit ini, dan alat akan mengira serta memaparkan nilai yang setara dalam dua unit yang lain secara automatik. Anda juga boleh menetapkan saiz fon akar tersuai dan saiz fon konteks em tersuai supaya penukaran sepadan dengan keperluan reka bentuk anda sendiri.
Alat ini berguna untuk sesiapa yang perlu menukar nilai px tetap kepada unit rem atau em yang relatif bagi reka bentuk responsif, yang ingin memahami bagaimana saiz fon akar yang berbeza memberi kesan kepada nilai rem, yang perlu mengira nilai em berdasarkan saiz fon elemen tertentu, atau yang ingin memastikan saiz elemen berskala dengan betul apabila pembaca menukar saiz fon lalai mereka.
Cara menggunakan medan input
Terdapat tiga medan utama pada alat ini: Saiz fon akar (px), saiz fon konteks em (px) dan Nilai. Apabila anda mengedit mana-mana daripada medan px, rem atau em di bahagian Nilai, dua medan yang lain dikemas kini semasa anda menaip. Ini sepadan dengan petunjuk yang dipaparkan pada alat: "Masukkan nilai px, rem atau em — dua nilai yang lain akan dikemas kini semasa anda menaip." Selepas penukaran berjaya, alat memaparkan mesej "Ditukar merentasi ketiga-tiga unit."
Secara lalai, saiz fon akar ditetapkan pada 16px dan saiz fon konteks em juga ditetapkan pada 16px, jadi pada mulanya 16px bersamaan dengan 1rem dan bersamaan dengan 1em. Alat ini turut membenarkan nilai piksel negatif dimasukkan pada medan Nilai.
Jika anda memasukkan nilai yang tidak sah pada medan Nilai, alat memaparkan mesej "Masukkan nombor untuk ditukar." Saiz fon akar mestilah nombor yang lebih besar daripada 0 — jika tidak, mesej "Saiz fon akar mestilah nombor yang lebih besar daripada 0." dipaparkan. Begitu juga, saiz fon konteks em mestilah nombor yang lebih besar daripada 0, dan jika tidak, alat memaparkan "Saiz fon konteks em mestilah nombor yang lebih besar daripada 0."
Perbezaan antara px, rem dan em
px ialah panjang tetap. rem diukur berbanding saiz fon akar halaman, jadi pada akar 16px, 1rem bersamaan dengan 16px. em pula diukur berbanding saiz fon elemen tempat ia berada. Menentukan saiz jenis dan jarak dalam rem membolehkan semuanya diskalakan apabila pembaca menukar saiz fon lalai mereka.
Sebagai contoh, jika saiz fon akar ditetapkan pada 16px dan anda memasukkan 24px pada medan Nilai, alat akan memaparkan 1.5rem (24 dibahagi 16), kerana rem sentiasa dikira berbanding saiz fon akar yang anda tetapkan pada medan Saiz fon akar (px).
Saiz fon akar dan konteks em fon
em adalah relatif kepada saiz fon elemennya sendiri, yang tidak selalunya merupakan akar. Tetapkan medan saiz fon konteks em kepada saiz fon elemen tersebut untuk membaca em dengan betul, dan pastikan ia sama dengan saiz fon akar apabila kedua-duanya sepadan.
Contohnya, jika sesuatu elemen mempunyai saiz fon 20px dan anda ingin menukar nilai 30px kepada em bagi elemen itu, tetapkan medan saiz fon konteks em (px) kepada 20px terlebih dahulu; alat kemudian akan memaparkan 1.5em (30 dibahagi 20) bagi nilai tersebut.
Jika saiz fon akar anda bukan 16px, ubah medan saiz fon akar untuk memadankan CSS anda dan setiap nilai rem akan dikemas kini serta-merta.
Jadual rujukan pantas untuk 16px
Alat ini turut memaparkan jadual berlabel "px → rem biasa (asas 16px)" yang menunjukkan beberapa nilai piksel biasa yang telah ditukar kepada rem, dengan andaian saiz fon akar 16px. Jadual pantas ini ialah panduan berguna untuk akar 16px biasa yang dimulakan oleh kebanyakan tapak, walaupun anda masih boleh menukar saiz fon akar di atas untuk melihat nilai rem yang sepadan dengan tapak anda sendiri.
Privasi dan pemprosesan data
Setiap penukaran dijalankan dalam penyemak imbas anda. Tiada apa-apa yang anda taip akan dimuat naik ke BroBroGo.
Soalan Lazim
Apakah perbezaan antara px, rem dan em? px ialah panjang tetap. rem diukur berbanding saiz fon akar halaman, jadi pada akar 16px, 1rem bersamaan dengan 16px. em diukur berbanding saiz fon elemen tempat ia berada. Menentukan saiz jenis dan jarak dalam rem membolehkan semuanya diskalakan apabila pembaca menukar saiz fon lalai mereka.
Mengapakah terdapat saiz konteks em yang berasingan? em adalah relatif kepada saiz fon elemennya sendiri, yang tidak selalunya merupakan akar. Tetapkan konteks em kepada saiz fon elemen tersebut untuk membaca em dengan betul, dan pastikan ia sama dengan akar apabila kedua-duanya sepadan.
Bagaimana jika saiz fon akar saya bukan 16px? Ubah medan saiz fon akar untuk memadankan CSS anda dan setiap nilai rem akan dikemas kini serta-merta. Jadual pantas di bawah ialah panduan berguna untuk akar 16px biasa yang dimulakan oleh kebanyakan tapak.