Konversi em ke px Em ↔ Pixels Gratis Daring Aman
Ketik sebuah nilai dalam em dan bacalah langsung dalam px. 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 em ke px
| em | px |
|---|---|
| 0.5 | 8 |
| 0.75 | 12 |
| 1 | 16 |
| 1.25 | 20 |
| 1.5 | 24 |
| 2 | 32 |
| 2.5 | 40 |
| 3 | 48 |
| 4 | 64 |
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 em ke px
Sebuah stylesheet menulis margin-bottom: 0.75em pada sebuah judul, dan padding: 0.4em 0.9em pada sebuah tombol, dan line-height 1.3em pada blok teks. Nilai-nilai itu bagus dan fleksibel, dan nyaris mustahil dibayangkan. Berapa piksel margin itu? Apakah padding tombol sama dengan 6 px dan 14 px di berkas desain? Untuk mengetahuinya Anda konversi em ke px: Anda mengalikan dengan ukuran font yang dirujuk em itu, dan membaca jawabannya dalam satuan yang dipakai alat desain. Itu pertanyaan yang diajukan pengembang ketika meninjau kode, memeriksa hasil build terhadap mockup, men-debug masalah spasi, atau menyerahkan komponen jadi kepada orang yang berpikir dalam piksel.
Em adalah satuan tersulit di CSS untuk dikonversi, karena tidak punya nilai tetap. Satu em adalah ukuran font yang berlaku di tempat nilai itu dipakai, atau, untuk properti font-size itu sendiri, ukuran font induknya. Jadi 1.5 em bisa 24 px di satu tempat dan 36 px di tempat lain, dalam stylesheet yang sama, dari aturan yang sama. Konverter karena itu tidak menebak. Ia meminta ukuran font yang dirujuk em, menampilkannya di samping jawaban, dan menghitung dengannya. Jika Anda tidak tahu ukurannya, bagian di bawah menjelaskan cara menemukannya di browser Anda.
Perhitungan terjadi di browser Anda dan tidak ada yang diunggah. Di bawah Anda akan menemukan rumusnya, cara menemukan basis yang tepat, apa yang dipertahankan dan tidak dapat dipertahankan konversi, bagaimana nilai em bersarang saling mengalikan, kapan pengembang perlu konversi em ke px, dan beberapa kebiasaan yang menjaga stylesheet berbasis em tetap dapat dipahami.
Rumus dan basisnya
px sama dengan em dikalikan ukuran font
Rumusnya satu perkalian: px = em × basis. Dengan basis 16 px, 1.5 em menjadi 24 px, 0.75 em menjadi 12 px, dan 2 em menjadi 32 px. Halaman mencetak basisnya di samping hasil, sehingga baris seperti 1.5 em = 24 px (16 px) menyatakan persis apa yang diasumsikan. Jika ukuran font elemen adalah 20 px, ketik 20, dan 1.5 em menjadi 30 px.
Menemukan basis di browser Anda
Buka alat pengembang, pilih elemen, dan lihat ukuran font terkomputasinya. Itulah angka yang diketik di kolom basis untuk properti apa pun selain font-size. Untuk font-size itu sendiri, pilih induknya dan baca ukuran terkomputasinya. Itu memakan beberapa detik dan menghilangkan tebak-tebakan sepenuhnya.
Ketika Anda tidak bisa melihat halamannya
Jika Anda membaca kode tanpa halamannya, ikuti rantai ukuran font ke atas dari elemen: font-size miliknya sendiri jika ada, jika tidak milik induknya, dan seterusnya sampai akar, yaitu 16 px kecuali stylesheet atau pembaca mengubahnya. Di mana ukuran diberikan dalam em, kalikan sepanjang rantai. Ini membosankan, itulah sebabnya kebanyakan tim memilih rem untuk ukuran font.
Apa yang dipertahankan konversi dan apa yang tidak
Ia mempertahankan proporsi terhadap teks
Hasilnya adalah ukuran piksel yang diwakili em pada basis yang Anda ketik. Ditulis dalam em, sebuah jarak atau ukuran mengikuti teks yang menjadi miliknya, dan konversi menunjukkan berapa jadinya untuk satu ukuran teks tertentu.
Ia tidak dapat memberi satu jawaban untuk seluruh halaman
Inilah yang harus diwaspadai: em relatif terhadap ukuran font elemen itu sendiri, atau, untuk font-size, terhadap induknya, bukan terhadap akar. 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 saling mengalikan. Angka di 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 keduanya, konversi rem ke px dan lihat bagaimana satuan relatif terhadap akar tetap tidak berubah.
Pembulatan
Mengalikan dengan basis bilangan bulat memberikan hasil yang tepat untuk kebanyakan nilai. Jika basisnya desimal, misalnya 13.5 px, nilai seperti 1.2 em memberi 16.2 px. Browser menangani piksel pecahan, tetapi ketika Anda memerlukan piksel utuh, untuk garis tepi halus atau ikon pada grid, bulatkan dengan sengaja dan periksa tampilannya.
Bagaimana nilai em bersarang saling mengalikan
Daftar di dalam daftar
Ambil halaman yang teks isinya 16 px. Sebuah daftar memiliki font-size: 0.875em, yaitu 14 px. Butir-butir di dalamnya juga memiliki font-size: 0.875em, yaitu 14 × 0.875 = 12.25 px. Daftar di dalam sebuah butir melakukannya lagi: 10.7 px. Tiga tingkat ke dalam dan teksnya kecil sekali, dan tidak ada yang memutuskan begitu. Ketika Anda konversi em ke px untuk sebuah komponen dan jawabannya tampak terlalu kecil, penyarangan adalah hal pertama yang diperiksa.
Menelusuri rantai ke atas
Untuk mengetahui ukuran piksel sebenarnya dari em bersarang, kalikan basis dengan setiap nilai sepanjang jalan ke bawah: 16 × 0.875 × 0.875 = 12.25. Konverter mengerjakan satu langkah pada satu waktu. Untuk sebuah rantai, konversi nilai pertama, pakai jawabannya sebagai basis untuk yang kedua dan lanjutkan. Itu aritmetika yang sama yang dilakukan browser.
Cara menghentikan penumpukan
Pakai rem untuk ukuran font, sehingga setiap ukuran merujuk ke akar, dan simpan em untuk spasi, sehingga padding dan margin mengikuti teks elemennya sendiri. Dalam kombinasi itu, tidak ada yang menumpuk, dan nilai em yang Anda konversi selalu relatif terhadap ukuran font yang dapat Anda baca seketika.
Nilai-nilai umum
Tabel di kaki halaman
Halaman memuat tabel nilai piksel yang sesuai dengan angka em yang umum pada basis yang Anda tetapkan: 0.5 em adalah 8 px, 0.625 adalah 10, 0.75 adalah 12, 0.875 adalah 14, 1 adalah 16, 1.125 adalah 18, 1.25 adalah 20, 1.5 adalah 24, 2 adalah 32, 3 adalah 48, dan 4 adalah 64. Pada basis bawaan angka-angka ini sama dengan untuk rem. Ubah basisnya dan tabel berubah bersamanya, yang merupakan cara bagus untuk melihat apa yang sebenarnya dilakukan em.
Coba dua basis berdampingan
Ketik 1.5 dengan basis 14, lalu dengan basis 20. Anda mendapat 21 dan 30 piksel. Itulah seluruh perbedaan antara em dan rem dalam satu percobaan: angka yang sama, dua elemen, dua ukuran.
Cara konversi em ke px di sini
Ketik nilai em
Masukkan ukuran dalam em di kolom pertama. Desimal diterima, jadi 0.714 berfungsi sama baiknya dengan 1.
Atur ukuran font yang dirujuk em
Ketik ukuran font elemen, atau induknya jika propertinya font-size. Jika Anda ragu, biarkan 16 dan anggap hasilnya perkiraan.
Baca nilai pikselnya
Jawaban muncul seketika, dengan basis ditampilkan di sampingnya. Salin ke catatan Anda atau bandingkan dengan berkas desain.
Dari mana satuan-satuan ini berasal
Em
Em lebih tua daripada web. Dalam huruf logam ia adalah lebar sebuah balok cetak, dinamai menurut huruf kapital M, dan para tipografer masih berbicara tentang tanda pisah em dan spasi em. Di CSS ia berarti ukuran font yang berlaku, itulah sebabnya ia berubah ketika Anda menyarangkan elemen.
Piksel dan rem
Ketika layar berhenti memiliki kepadatan yang dapat diprediksi, halaman yang diukur dalam piksel sungguhan menjadi halaman yang menyusut seiring layar makin tajam. Maka piksel CSS didefinisikan ulang sebagai panjang acuan: sekitar 1/96 inci yang dilihat pada jarak baca yang nyaman. Rem ditambahkan untuk lolos dari penumpukan em: ia adalah em dari elemen akar dan tidak pernah mengalikan. Jika Anda bekerja dengan keduanya, konversi px ke em untuk pergi ke arah sebaliknya.
Kapan pengembang konversi em ke px
Memeriksa hasil build terhadap berkas desain
Desainer menyerahkan berkas dalam piksel, dan kodenya dalam em. Untuk memeriksa bahwa halaman sesuai, Anda konversi em ke px memakai ukuran font setiap komponen. Tombol dengan label 14 px dan padding 0.714em 1.429em seharusnya keluar sebagai 10 px dan 20 px, dan jika desain menyebut 12 dan 24, salah satunya keliru.
Men-debug spasi
Ketika sebuah celah tampak terlalu besar atau terlalu kecil, penyebabnya biasanya nilai em yang merujuk ke font yang lebih besar atau lebih kecil daripada yang Anda duga. Mengonversinya dengan ukuran font terkomputasi elemen langsung memberi tahu Anda apakah aritmetikanya masalahnya.
Membaca kode yang tak dikenal
Stylesheet warisan penuh dengan nilai em yang ukuran pikselnya harus Anda rekonstruksi. Mengonversi segelintir yang utama, dengan basis yang tepat, memberi Anda peta desainnya.
Menulis dokumentasi dan pengujian
Orang yang menguji halaman menggambarkan apa yang mereka lihat dalam piksel. Pengembang yang berkata padding-nya 0.9em memberi sedikit arti bagi penguji; 12.6 px berarti sesuatu. Mengonversi membuat kedua pihak saling memahami.
Jebakan ketika Anda konversi em ke px
Memakai basis yang salah
Kesalahan yang paling umum. Untuk font-size, pakai ukuran induk; untuk semua properti lain, ukuran elemen itu sendiri. Periksa propertinya sebelum Anda mengetik basis.
Melupakan induk dalam em
Jika ukuran induknya sendiri dalam em, Anda harus mengikuti rantainya. Pakai nilai terkomputasi dari alat pengembang untuk mempersingkatnya.
Mengira layar menampilkan piksel yang sama
Piksel CSS bukan piksel perangkat. Pada layar berkepadatan tinggi satu piksel CSS bisa dua atau tiga piksel perangkat. Konversi memberi piksel CSS, satuan yang dipakai bersama oleh alat desain dan stylesheet.
Menganggap jawaban sebagai janji
Jika pembaca memperbesar teks atau komponen dipakai ulang dengan ukuran font lain, pikselnya berubah, sebagaimana mestinya. Angka hasil konversi menggambarkan satu situasi, bukan semuanya.
Pertanyaan yang diajukan orang sebelum mengonversi
Berapa piksel 1 em?
Sebanyak ukuran font yang berlaku: 16 px untuk teks isi biasa pada bawaan, 24 px di dalam elemen 24 px.
Berapa piksel 2 em?
Dua kali ukuran font yang berlaku. Pada 16 px itu 32 px.
Mengapa browser saya menunjukkan sesuatu yang berbeda?
Ukuran font sebenarnya dari elemen berbeda dari basis yang Anda ketik. Baca ukuran font terkomputasi di alat pengembang.
Apakah em sama dengan rem?
Tidak. Em relatif terhadap elemen, rem terhadap akar.
Apakah angka saya diunggah?
Tidak. Aritmetikanya berjalan di browser Anda dan tidak ada yang dikirim ke mana pun.
Bagaimana cara kembali?
Dengan px ke em, yang membagi alih-alih mengalikan.
Kebiasaan yang menjaga stylesheet em tetap dapat dipahami
Beri komentar pada basisnya
Baris seperti padding: 0.75em 1.25em; /* 12px 20px at 16px */ hanya memakan beberapa karakter dan menghemat pembaca berikutnya dari satu konversi. Ia mencatat basis yang Anda asumsikan.
Atur ukuran font sekali per komponen
Definisikan ukuran font komponen pada elemen akarnya, dan rujuk dengan em di dalamnya. Basisnya lalu sama untuk setiap nilai di dalam komponen, dan Anda dapat konversi em ke px terhadapnya dengan yakin.
Simpan em untuk spasi, rem untuk huruf
Itulah pembagian yang dipilih kebanyakan stylesheet, dan ia menjaga aritmetikanya tetap sederhana. Untuk ukuran yang relatif terhadap layar, px ke vw dan vw ke px adalah alatnya.
Uji pada ukuran teks yang berbeda
Naikkan ukuran teks bawaan di browser Anda dan lihat halamannya. Jika spasi mengikuti teks, nilai em bekerja. Jika tidak, ada yang tertinggal dalam piksel.
Metode untuk kasus-kasus canggung
Bekerja dari luar ke dalam
Ketika sebuah komponen berada jauh di dalam yang lain dan nilai em-nya tampak membingungkan, mulailah dari elemen terluar yang ukurannya Anda ketahui dan bekerjalah ke dalam, mengonversi satu tingkat pada satu waktu. Tuliskan setiap ukuran piksel dalam catatan selagi Anda jalan. Setelah dua atau tiga tingkat seluruh rantai ada di atas kertas, dan Anda dapat melihat persis dari mana angka yang mengejutkan itu berasal. Itu memakan semenit dan menggantikan satu jam menebak-nebak.
Putuskan apakah akan disederhanakan
Jika Anda harus konversi em ke px melalui empat tingkat untuk memahami sebuah tata letak, stylesheet itu sedang memberi tahu Anda sesuatu. Pertimbangkan memindahkan ukuran font ke rem, sehingga masing-masing merujuk ke akar, dan hanya menyisakan spasi dalam em. Halamannya akan tampak sama dan jauh lebih mudah dibaca tahun depan.
Konverter terkait
Keluarga alat yang sama mencakup konversi di sekitarnya. Untuk kembali ke em, pakai px ke em. 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 stylesheet yang sama, HEX ke RGB dan RGB ke HEX menangani notasinya.
Contoh hitungan
Katakanlah Anda sedang meninjau komponen tombol. Labelnya 14 px, CSS-nya menulis padding: 0.714em 1.429em dan celah 0.5em antara ikon dan label. Anda mengetik 14 sebagai basis, lalu 0.714 dan membaca 10 px, 1.429 dan membaca 20 px, 0.5 dan membaca 7 px. Berkas desain menyebut 10, 20, dan 8. Dua dari tiga cocok, jadi Anda melihat celahnya: 8 px pada basis 14 adalah 0.571 em, dan seseorang membulatkannya menjadi 0.5. Anda mengangkatnya dalam tinjauan, dan perbaikannya hanya satu angka.
Daftar periksa singkat
Sebelum mengonversi
Temukan ukuran font yang dirujuk em, dari alat pengembang atau dari rantai ukuran font dalam kode.
Selagi mengonversi
Ketik nilai em, atur basis, dan baca pikselnya, dengan mencatat basis yang ditampilkan di samping hasil.
Setelah mengonversi
Bandingkan dengan berkas desain. Jika angkanya berbeda, periksa basisnya sebelum Anda mencurigai kodenya.
Kesalahan umum
Memakai 16 tanpa memeriksa
Itu benar hanya ketika ukuran font elemen adalah 16 px.
Menyamakan em dengan rem
Keduanya tampak mirip dan berperilaku berbeda. Pakai halaman yang tepat untuk masing-masing.
Lupa bahwa em menumpuk
Nilai di dalam elemen bersarang relatif terhadap ukuran yang mungkin belum Anda lihat. Ikuti rantainya.
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 em ke px.
Ringkasan
Untuk konversi em ke px di sini, ketik ukuran dalam em dan ukuran font yang dirujuknya, dan baca hasilnya dalam piksel seketika, memakai rumus px = em × basis. Konversi mempertahankan proporsi relatif terhadap ukuran font yang berlaku di tempat nilai itu dipakai. Ia tidak dapat memberi satu jawaban untuk halaman: em relatif terhadap elemen itu sendiri, atau terhadap induk 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 saling mengalikan. Untuk satu angka yang berlaku di mana-mana, pakai rem. Tidak ada yang diunggah.