Konversi px ke em Pixels ↔ Em Gratis Daring Aman
Ketik sebuah nilai dalam px dan bacalah langsung dalam em. Hitungannya terjadi di peramban Anda, tidak ada yang dikirim ke mana pun, dan apa yang menentukan hasilnya tertulis di bawah, bukan diandaikan.
Tidak ada unggahan
Ukuran yang lazim — Konversi px ke em
| px | em |
|---|---|
| 8 | 0.5 |
| 10 | 0.625 |
| 12 | 0.75 |
| 14 | 0.875 |
| 16 | 1 |
| 18 | 1.125 |
| 20 | 1.25 |
| 24 | 1.5 |
| 32 | 2 |
| 48 | 3 |
| 64 | 4 |
Dari mana satuan ini berasal
Piksel pada CSS bukanlah piksel pada layar Anda. Ketika layar tak lagi punya kerapatan yang bisa diramalkan, halaman yang diukur dengan piksel sungguhan menjadi halaman yang menyusut seiring layar makin tajam; maka piksel CSS ditetapkan ulang sebagai panjang acuan: sekitar 1/96 inci, dilihat dari jarak baca yang nyaman. Semua yang lain di halaman ini berdiri di atasnya. Em lebih tua daripada web — pada huruf timah ia adalah lebar sebuah balok cetak, dinamai menurut huruf M besar — dan pada CSS ia berarti ukuran huruf yang sedang berlaku, karena itu ia berubah ketika Anda menyarangkan elemen. Rem ditambahkan justru untuk lolos dari hal itu: ia em milik elemen akar dan tak pernah bertumpuk. Vw datang bersama rancangan tanggap: seperseratus lebar jendela, berapa pun lebarnya.
Di mana Anda menemuinya
Inilah satuan tiap lembar gaya. Piksel menentukan tepi, bayangan, dan segala yang tak boleh ikut berskala; rem menentukan huruf, jarak, dan tata letak, sehingga satu perubahan di akar mengubah ukuran seluruh antarmuka; em menentukan hal-hal yang harus mengikuti teksnya sendiri, seperti ganjal di dalam tombol; vw menentukan judul dan bagian pembuka yang mesti memenuhi layar pada peranti apa pun. Mengubah di antara keduanya adalah hitungan sehari-hari untuk menjadikan rancangan yang diserahkan dalam piksel sebagai lembar gaya yang ikut berskala.
Pertanyaan yang sering diajukan
Mengapa 16 px menjadi titik tolak yang lazim?
Karena itulah ukuran teks bawaan pada semua peramban besar, dan lembar gaya yang tak menimpanya akan mewarisinya. Jadi satu rem sama dengan 16 px pada setelan bawaan, dan dari sanalah datangnya konversi yang akrab: 0,5 rem adalah 8 px, 1,5 rem adalah 24 px. Bila pengguna memperbesar nilai bawaan itu pada setelan peramban, nilai rem yang sama ikut membesar — dan justru itulah gunanya memakainya.
Sebaiknya memakai rem atau em?
Rem untuk segala yang harus mengikuti halaman secara keseluruhan — tangga ukuran huruf, jarak, lebar tata letak — sebab ia diukur dari akar dan tak pernah menumpuk. Em untuk segala yang harus mengikuti teks tempatnya berada: ganjal sebuah tombol, sela di samping ikon, inden sebuah kutipan. Kekeliruan yang lazim ialah menyarangkan elemen berukuran em satu di dalam yang lain: 1,2 em di dalam 1,2 em menjadi 1,44, lalu 1,73, sampai teks di bawah halaman berukuran dua kali lipat dari yang dimaksudkan.
Apakah hasilnya tepat?
Bila kedua satuan saling didefinisikan dengan bilangan bulat, ya — halaman menyatakannya di atas angka, dan pembulatan hanya ada pada berapa digit yang ditampilkan. Bila rasionya tidak berujung sebagai desimal, halaman menampilkan dua belas angka penting dan menyebut hubungannya hampiran, bukan berpura-pura sebaliknya.
Apakah yang saya ketik meninggalkan perangkat saya?
Tidak. Perhitungan berjalan di peramban Anda; tidak ada yang diunggah, dan memang tidak ada server untuk menerimanya. Sekali dimuat, halaman tetap bekerja meski jaringan dimatikan.
Mengapa Anda konversi px ke em
Em adalah satuan relatif tertua di CSS dan yang paling banyak menimbulkan perdebatan. Anda punya ukuran dalam piksel dari berkas desain, 20 px padding pada tombol, 14 px ruang di samping ikon, 36 px untuk judul, dan Anda menginginkannya dalam em, agar ia mengikuti teks yang menjadi miliknya. Ketika Anda konversi px ke em, Anda mengajukan pertanyaan tertentu: kelipatan berapa dari ukuran font saat ini? Jawabannya bergantung pada angka yang tak dapat ditebak halaman, ukuran font yang berlaku di tempat nilai itu dipakai, jadi konverter menaruh angka itu di sebuah kolom dan memakainya secara terbuka.
Alasan menulis ukuran dalam em adalah bahwa hal-hal yang milik teks harus tumbuh bersama teks. Padding di dalam tombol harus lebih besar ketika label tombol lebih besar. Celah antara ikon dan keterangannya harus melebar ketika keterangannya melebar. Margin bawah judul harus tetap proporsional dengan judul. Dalam semua kasus ini nilai piksel salah begitu ukuran font berubah, dan nilai em benar pada ukuran apa pun. Itulah seluruh dalih untuk em, dan itu dalih yang kuat.
Perhitungan terjadi di browser Anda, dan tidak ada yang diunggah. Di bawah Anda akan menemukan rumusnya, alasan em memerlukan lebih banyak kehati-hatian daripada rem, jebakan bersarang yang menghasilkan ukuran mengejutkan, tempat em adalah satuan yang tepat, dan metode untuk memilih antara em dan rem dalam lembar gaya sungguhan.
Rumus dan basis
em sama dengan px dibagi ukuran font
Rumusnya satu pembagian: em = px ÷ basis. Dengan basis 16 px, nilai 24 px menjadi 1,5 em, 8 px menjadi 0,5 em, dan 20 px menjadi 1,25 em. Halaman menunjukkan basis di samping hasil, seperti pada 24 px = 1,5 em (16 px), jadi Anda dapat melihat apa yang diasumsikan. Aritmetikanya sama seperti untuk rem. Maknanya berbeda.
Apa itu basis
Untuk rem, basis adalah ukuran font elemen akar. Untuk em, ia adalah ukuran font elemen tempat nilai itu dipakai, atau, untuk properti font-size sendiri, ukuran induk. Itulah sebabnya em tidak punya jawaban tunggal: nilai lembar gaya yang sama berarti ukuran piksel berbeda di tempat berbeda. Jika Anda mengonversi padding untuk tombol yang teksnya 14 px, ketik 14 sebagai basis. Jika Anda mengonversi margin untuk judul 32 px, ketik 32.
Bawaan ketika Anda tidak tahu
Jika Anda hanya menginginkan angka kasar, biarkan basis pada 16, ukuran teks biasa di browser yang tak pernah diubah siapa pun. Hasilnya benar untuk blok teks isi normal, dan ia memberi Anda gambaran proporsi meski elemennya ternyata punya ukuran berbeda.
Apa yang dipertahankan konversi dan apa yang tidak bisa
Ia mempertahankan proporsi terhadap teks
Hasilnya adalah proporsi relatif terhadap ukuran font yang berlaku di tempat nilai itu dipakai. Ditulis dalam em, ruang tumbuh dan menyusut bersama teks di sampingnya, dan begitulah persisnya ruang di sekitar kata seharusnya berperilaku.
Ia tak dapat memberi satu angka untuk halaman
Inilah yang perlu diwaspadai. Em relatif terhadap ukuran font elemen itu sendiri, atau, untuk font-size, induknya, bukan terhadap akar. Jadi tidak ada jawaban tunggal untuk halaman: 1,5 em yang sama adalah 24 px di dalam elemen 16 px dan 36 px di dalam elemen 24 px, dan em di dalam em berlipat. Angka pada halaman benar untuk basis di kolom dan tidak untuk yang lain. Jika Anda menginginkan satu angka yang berlaku di mana-mana, itulah gunanya rem. Untuk membandingkan, konversi px ke rem dan lihat bagaimana nilai piksel yang sama berperilaku.
Pembulatan
Pembagian dengan 16 memberi nilai bersih untuk banyak ukuran dan desimal berulang untuk yang lain. Nilai seperti 0,8125 em tidak masalah dalam lembar gaya, tetapi Anda mungkin lebih suka membulatkan ke 0,8 atau 0,85 jika ukuran persisnya tak penting. Pertahankan angka penuh di tempat presisi penting.
Jebakan bersarang
Bagaimana em berlipat
Misalkan daftar punya font-size: 0.875em dan itemnya juga punya font-size: 0.875em. Daftar adalah 87,5% dari induknya. Setiap item adalah 87,5% dari daftar, yaitu sekitar 76,6% dari induk. Daftar yang bersarang di dalam item menyusut lagi, menjadi sekitar 67%. Setelah tiga tingkat teksnya sangat kecil, dan tak seorang pun menulisnya dengan sengaja. Inilah yang dimaksud dengan mengatakan bahwa em berlipat.
Mengapa penting ketika Anda konversi px ke em
Jika Anda mengonversi nilai piksel ke em untuk font-size, basis yang harus Anda pakai adalah ukuran font induk, bukan milik elemen itu sendiri. Banyak kekeliruan datang dari memakai yang salah. Untuk properti lain, seperti padding dan margin, basisnya adalah ukuran font elemen itu sendiri. Aturannya mudah diucapkan dan mudah dilupakan: font-size melihat ke atas, yang lain melihat dirinya sendiri.
Cara menghindari kejutan
Pakai em untuk ruang yang mengikuti teks, dan rem untuk ukuran font. Dengan begitu ukuran font tak pernah berlipat, karena mengacu pada akar, dan ruang tetap mengikuti teksnya sendiri. Itulah kombinasi yang dipilih sebagian besar lembar gaya modern.
Ukuran umum
Tabel di kaki halaman
Di bawah konverter ada tabel ukuran umum pada basis yang Anda atur: 8 px adalah 0,5 em, 10 px adalah 0,625, 12 px adalah 0,75, 14 px adalah 0,875, 16 px adalah 1, 18 px adalah 1,125, 20 px adalah 1,25, 24 px adalah 1,5, 32 px adalah 2, 48 px adalah 3, dan 64 px adalah 4. Pada basis 16, ini angka yang sama seperti untuk rem, itulah sebabnya orang mencampuradukkan keduanya. Perbedaannya ada pada apa yang diwakili 16.
Mengubah basis agar cocok dengan elemen
Jika Anda mengatur basis ke 14 untuk tombol kecil, tabel berubah: 14 px kini 1 em, 7 px adalah 0,5 em, dan 21 px adalah 1,5 em. Cobalah, dan Anda akan melihat bagaimana padding 1,5 em punya ukuran piksel berbeda pada tombol 14 px daripada pada yang 18 px, dan mengapa itu berguna.
Cara konversi px ke em di sini
Ketik nilai piksel
Masukkan ukuran dalam piksel di kolom pertama. Desimal diterima.
Atur ukuran font yang dirujuk em
Ketik ukuran font elemen, atau induknya jika Anda mengonversi font-size. Jika Anda tak yakin, biarkan 16 dan perlakukan hasilnya sebagai perkiraan.
Salin nilai em
Pakai angka dalam CSS Anda dengan satuannya, seperti pada padding: 1.25em. Angka tanpa satuan tidak valid untuk sebagian besar properti.
Dari mana satuan ini berasal
Em dalam huruf logam
Em lebih tua daripada web. Dalam huruf logam ia adalah lebar balok cor, dinamai menurut huruf kapital M, dan ia satuan alami ruang horizontal pada baris cetak. Tipografer masih berbicara tentang tanda pisah em dan spasi em. Dalam CSS gagasan itu bertahan dalam bentuk yang lebih longgar: satu em adalah ukuran font saat ini.
Piksel dan rem
Piksel CSS adalah panjang acuan sekitar 1/96 inci yang dilihat pada jarak baca yang nyaman, bukan titik di layar Anda. Rem ditambahkan untuk memberi pengembang satuan yang relatif tetapi tak pernah berlipat: ia adalah em dari elemen akar. Di antara mereka, piksel, em, dan rem mencakup tiga kebutuhan: ukuran tetap, ukuran relatif terhadap teks, dan ukuran relatif terhadap halaman.
Di mana em adalah pilihan yang tepat
Padding di dalam tombol dan bidang formulir
Tombol dengan padding: 0.5em 1em tampak sama dalam proporsi pada ukuran teks apa pun. Buat label lebih besar dan seluruh tombol tumbuh bersamanya, yang Anda inginkan dari komponen yang mungkin dipakai di bilah alat dan di spanduk hero.
Ruang di samping ikon
Ikon yang diikuti keterangan memerlukan celah yang menyesuaikan dengan keterangan. Margin 0,4em melakukannya; margin 6px tidak.
Margin di sekitar judul dan paragraf
Irama vertikal dalam dokumen lebih mudah dijaga ketika jarak paragraf dalam em, karena ia mengikuti ukuran paragraf. Margin judul dalam em tetap proporsional ketika judul berubah ukuran pada titik henti berbeda.
Media query
Titik henti yang ditulis dalam em menanggapi ukuran teks pembaca, jadi tata letak beralih ke bentuk sempitnya lebih awal bagi orang yang telah memperbesar teksnya. Dalam media query, em merujuk pada bawaan browser dan bukan elemen mana pun, jadi ia tidak berlipat.
Jebakan saat Anda konversi px ke em
Memakai basis yang salah
Kekeliruan paling umum. Untuk font-size, pakai ukuran induk; untuk yang lain, milik elemen itu sendiri. Periksa properti mana yang Anda konversi sebelum mengetik basis.
Lupa bahwa induk mungkin juga dalam em
Jika ukuran font induk sendiri dalam em, Anda harus mengikuti rantai ke atas untuk mengetahui ukuran sebenarnya. Ketika lembar gaya menjadi rumit, ubah ukuran font ke rem dan simpan em untuk ruang.
Mengharapkan satu angka untuk seluruh komponen
Komponen yang memuat teks berbagai ukuran tidak punya satu nilai em untuk bagian-bagiannya. Konversikan setiap bagian terhadap basisnya sendiri.
Mencampur em dan rem untuk properti yang sama
Padding 1rem di samping margin 1em sah dan sering membingungkan. Pilih aturan, seperti rem untuk ukuran font dan em untuk ruang, dan patuhi.
Pertanyaan yang diajukan orang sebelum mengonversi
Berapa em 16 px?
Satu, jika ukuran font yang berlaku 16 px. Jika ukuran font elemen 20 px, maka 16 px adalah 0,8 em.
Apakah em lebih baik daripada rem?
Tak satu pun lebih baik. Rem lebih baik untuk ukuran font dan tata letak global. Em lebih baik untuk ruang yang harus mengikuti teksnya sendiri.
Mengapa padding saya lebih besar daripada yang diharapkan?
Karena ia relatif terhadap ukuran font elemen, yang mungkin lebih besar daripada yang Anda kira. Periksa ukuran font terhitung di alat pengembang browser.
Bisakah saya memakai desimal?
Ya. Nilai seperti 0,625em dan 1,333em normal.
Apakah angka saya diunggah?
Tidak. Aritmetika berjalan di browser Anda dan tidak ada yang dikirim ke mana pun.
Bagaimana cara kembali?
Dengan em ke px, yang mengalikan alih-alih membagi.
Memilih dengan bijak saat konversi px ke em
Putuskan nilai itu milik apa
Jika ia milik teks, em tepat. Jika ia milik halaman, seperti lebar kolom atau celah bagian, rem atau satuan viewport lebih cocok. Px ke vw menyatakan ukuran sebagai bagian dari lebar layar.
Tulis maksudnya dalam komentar
Baris seperti padding: 0.75em 1.25em; /* 12px 20px at 16px */ membuat penalaran terlihat. Ketika ukuran font berubah kelak, Anda akan tahu apa yang dimaksudkan angka-angkanya.
Simpan ukuran font komponen di satu tempat
Atur ukuran font pada elemen akar komponen dan biarkan semua di dalamnya merujuknya. Maka nilai em di dalam berarti hal yang sama di mana-mana dalam komponen, dan Anda dapat konversi px ke em terhadap satu basis.
Kebiasaan baik saat Anda konversi px ke em
Konversi px ke em satu komponen sekali waktu
Jangan mencoba konversi px ke em untuk seluruh lembar gaya sekaligus. Ambil satu komponen, seperti kartu atau tombol, tentukan ukuran fontnya, dan konversikan setiap nilai ruangnya terhadap ukuran itu. Ketika komponen selesai, uji pada dua atau tiga ukuran teks. Lalu lanjut ke yang berikutnya.
Pakai kalkulator untuk nilai ganjil, bukan yang bulat
Nilai seperti 8, 16, dan 24 piksel terkonversi menjadi angka em yang rapi pada basis 16. Nilai ganjil seperti 22 atau 13 memberi desimal panjang. Ketika Anda konversi px ke em untuk itu, putuskan apakah desain sungguh memerlukan angka persis atau apakah nilai em bulat terdekat akan sama baiknya. Desainer sering senang membulatkan, dan lembar gaya yang rapi lebih mudah dipelihara.
Simpan catatan basis
Komentar singkat di samping setiap nilai em, menyatakan apa basisnya, membantu orang berikutnya. Jika seseorang mengubah ukuran font komponen kelak, mereka akan tahu bahwa ruang mengikutinya secara sengaja dan bukan kebetulan. Menuliskannya sekali sepadan dengan waktunya.
Bandingkan dengan padanan rem
Jika Anda tak yakin apakah em atau rem cocok untuk sebuah nilai, konversi px ke em dan ke rem dan tanyakan apa yang seharusnya terjadi ketika ukuran teks berubah. Jika nilai itu harus mengikuti teks elemen sendiri, ambil em. Jika harus mengikuti halaman, ambil rem.
Konverter terkait
Keluarga alat yang sama mencakup konversi di sekitarnya. Untuk kembali ke piksel, pakai em ke px. Untuk ukuran relatif terhadap akar, ada px ke rem dan rem ke px, dan untuk ukuran relatif terhadap layar, px ke vw dan vw ke px. Untuk warna pada lembar gaya yang sama, HEX ke RGB dan HEX ke HSL menangani notasinya.
Contoh hitungan
Katakanlah label tombol 14 px dan desain memberi tombol padding vertikal 10 px dan padding horizontal 20 px. Anda mengetik 14 sebagai basis, 10 dan membaca 0,714 em, mengetik 20 dan membaca 1,429 em. Dalam lembar gaya Anda menulis padding: 0.714em 1.429em. Ketika tombol yang sama dipakai di hero dengan label 18 px, padding menjadi 12,9 px dan 25,7 px, proporsional. Seandainya Anda menulis 10px dan 20px, tombol akan tampak tipis di sekitar teks yang lebih besar.
Daftar periksa singkat
Sebelum mengonversi
Putuskan properti mana yang dimiliki nilai itu, dan temukan ukuran font yang harus dijadikan rujukan.
Saat mengonversi
Ketik nilai piksel dan basis yang tepat, dan salin angka em dengan satuannya.
Setelah mengonversi
Ubah ukuran font komponen di browser dan periksa bahwa ruang mengikuti. Carilah nilai em bersarang yang berlipat.
Kesalahan umum
Memakai ukuran akar sebagai basis untuk padding
Itu tugas rem. Em merujuk pada ukuran font elemen itu sendiri.
Memakai em untuk setiap ukuran font
Ukuran font em bersarang berlipat dan mengejutkan Anda. Pakai rem untuk ukuran font.
Membulatkan ke angka yang rapi secara visual tetapi salah
1,43 tidak sama dengan 1,5 ketika dikalikan dengan font besar. Pertahankan cukup digit.
Angka Anda tetap di perangkat Anda
Perhitungan terjadi secara lokal. Nilai Anda dipakai oleh browser Anda sendiri dan tidak ada yang dikirim ke mana pun. Tidak ada yang perlu dihapus sesudahnya dan tidak ada akun yang perlu dibuat. Itulah cara sederhana untuk konversi px ke em.
Ringkasan
Untuk konversi px ke em di sini, ketik ukuran dalam piksel dan ukuran font yang dirujuknya, dan baca hasilnya seketika, memakai rumus em = px ÷ basis. Konversi mempertahankan proporsi relatif terhadap ukuran font yang berlaku di tempat nilai itu dipakai. Ia tak dapat memberi jawaban tunggal untuk halaman: em relatif terhadap ukuran font elemen itu sendiri, atau induknya untuk font-size, jadi 1,5 em yang sama adalah 24 px di dalam elemen 16 px dan 36 px di dalam elemen 24 px, dan em di dalam em berlipat. Untuk satu angka yang berlaku di mana-mana, pakai rem. Tidak ada yang diunggah.