em birimini px birimine çevirin Em ↔ Pixels Ücretsiz Çevrimiçi Güvenli
em cinsinden bir değer yazın, karşılığını hemen px cinsinden okuyun. Hesap tarayıcınızda yapılır, hiçbir yere bir şey gönderilmez ve sonucun neye bağlı olduğu varsayılmak yerine aşağıda yazılıdır.
Hiçbir şey yüklenmez
Alışılmış boyutlar — em birimini px birimine çevirin
| 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 |
Bu birimler nereden geliyor
CSS'teki piksel, ekranınızdaki piksel değildir. Ekranların yoğunluğu öngörülebilir olmaktan çıkınca, gerçek piksellerle ölçülmüş bir sayfa, ekranlar keskinleştikçe küçülen bir sayfaya dönüştü; bu yüzden CSS pikseli bir referans uzunluk olarak yeniden tanımlandı: rahat bir okuma mesafesinden görülen, inçin yaklaşık 1/96'sı. Bu sayfadaki her şey bunun üzerine kuruludur. Em, web'den eskidir — kurşun dizgide dökülmüş bir bloğun genişliğiydi, adını büyük M harfinden alır — ve CSS'te yürürlükteki yazı boyu demektir; öğeleri iç içe geçirdikçe değişmesinin sebebi budur. Rem tam da bundan kaçmak için eklendi: kök öğenin em'idir ve asla birikmez. Vw, duyarlı tasarımla geldi: görüntü alanının genişliğinin yüzde biri, o genişlik ne çıkarsa.
Onlarla nerede karşılaşırsınız
Bunlar her stil sayfasının birimleridir. Piksel kenarlıkları, gölgeleri ve ölçeklenmemesi gereken her şeyi boyutlandırır; rem yazıyı, boşlukları ve yerleşimi boyutlandırır, böylece kökteki tek bir değişiklik bütün bir arayüzü yeniden ölçekler; em kendi metnini izlemesi gereken şeyleri boyutlandırır, bir düğmenin iç boşluğu gibi; vw ise her aygıtta ekranı doldurması gereken başlıkları ve açılış bölümlerini. Aralarında çevirmek, piksellerle teslim edilmiş bir tasarımı ölçeklenen bir stil sayfasına dönüştürmenin günlük aritmetiğidir.
Sık sorulan sorular
Neden alışılmış başlangıç noktası 16 px?
Çünkü bütün büyük tarayıcılarda varsayılan metin boyu budur ve bunu geçersiz kılmayan bir stil sayfası onu devralır. Dolayısıyla varsayılan ayarda bir rem 16 px eder; tanıdık çevrimler buradan gelir: 0,5 rem 8 px, 1,5 rem 24 px. Bir kullanıcı tarayıcı ayarlarından varsayılanı büyütmüşse, aynı rem değerleri de onunla birlikte büyür — onları kullanmanın anlamı tam olarak budur.
rem mi kullanmalıyım, em mi?
Sayfanın bütününü izlemesi gereken her şey için rem — yazı ölçeği, boşluklar, yerleşim genişlikleri — çünkü kökten ölçülür ve asla birikmez. İçinde durduğu metni izlemesi gereken her şey için em: bir düğmenin iç boşluğu, bir simgenin yanındaki aralık, bir alıntının girintisi. Yaygın hata, em ile boyutlandırılmış öğeleri iç içe geçirmektir: 1,2 em içindeki 1,2 em 1,44 olur, sonra 1,73, derken sayfanın altındaki metin tasarlanandan iki kat büyük çıkar.
Sonuç kesin mi?
İki birim birbirinden tam sayılarla tanımlanıyorsa evet — sayfa bunu rakamın üstünde söyler ve tek yuvarlama kaç basamak gösterildiğindedir. Oranın sonlu bir ondalığı yoksa sayfa on iki anlamlı basamak gösterir ve ilişkinin yaklaşık olduğunu söyler, başka türlüymüş gibi yapmaz.
Yazdıklarım cihazımdan çıkıyor mu?
Hayır. Hesap tarayıcınızda yapılır; hiçbir şey yüklenmez, zaten yükleyecek bir sunucu da yok. Sayfa bir kez açıldıktan sonra ağ kapalıyken de çalışır.
em'i neden px'e çevirirsiniz
Bir stil sayfası bir başlıkta margin-bottom: 0.75em, bir düğmede padding: 0.4em 0.9em ve bir metin bloğunda 1.3em'lik bir satır yüksekliği söyler. Bunlar iyi, esnek değerlerdir ve neredeyse hayal edilemezler. Bu kenar boşluğu kaç pikseldir? Düğme dolgusu tasarım dosyasındaki 6 px ve 14 px ile eşleşiyor mu? Öğrenmek için em'i px'e çevirirsiniz: em'in başvurduğu yazı tipi boyutuyla çarpar ve cevabı tasarım araçlarının kullandığı birimde okursunuz. Bu, geliştiricilerin kodu gözden geçirirken, bir yapıyı bir taslakla karşılaştırırken, bir aralık sorununu ayıklarken ya da bitmiş bir bileşeni pikselle düşünen birine devrederken sorduğu bir sorudur.
Em, CSS'te çevirmesi en zor birimdir, çünkü sabit bir değeri yoktur. Bir em, değerin kullanıldığı yerde geçerli olan yazı tipi boyutudur ya da font-size özelliğinin kendisi için ebeveyninkidir. Yani 1,5 em bir yerde 24 px ve başka bir yerde 36 px olabilir; aynı stil sayfasında, aynı kuraldan. Dönüştürücü bu yüzden tahmin yürütmez. Em'in başvurduğu yazı tipi boyutunu sorar, onu cevabın yanında gösterir ve onunla hesaplar. Boyutu bilmiyorsanız aşağıdaki bölümler onu tarayıcınızda nasıl bulacağınızı açıklar.
Hesap tarayıcınızda gerçekleşir ve hiçbir şey yüklenmez. Aşağıda formülü, doğru tabanı nasıl bulacağınızı, dönüşümün neyi koruduğunu ve neyi koruyamadığını, iç içe em değerlerinin nasıl çarpıldığını, geliştiricilerin em'i ne zaman px'e çevirmesi gerektiğini ve em tabanlı bir stil sayfasını anlaşılır tutan birkaç alışkanlığı bulacaksınız.
Formül ve taban
px, em çarpı yazı tipi boyutuna eşittir
Formül tek bir çarpmadır: px = em × taban. 16 px'lik bir tabanla 1,5 em 24 px olur, 0,75 em 12 px olur ve 2 em 32 px olur. Sayfa tabanı sonucun yanında yazar; bu yüzden 1,5 em = 24 px (16 px) gibi bir satır tam olarak neyin varsayıldığını söyler. Öğenin yazı tipi boyutu 20 px ise 20 yazın ve 1,5 em 30 px olur.
Tabanı tarayıcınızda bulmak
Geliştirici araçlarını açın, öğeyi seçin ve hesaplanmış yazı tipi boyutuna bakın. font-size dışındaki her özellik için taban alanına yazılacak sayı budur. font-size'ın kendisi için bunun yerine ebeveyni seçin ve hesaplanmış boyutunu okuyun. Birkaç saniye sürer ve tahmini tümüyle ortadan kaldırır.
Sayfayı göremediğinizde
Kodu sayfa olmadan okuyorsanız yazı tipi boyutları zincirini öğeden yukarı doğru izleyin: varsa kendi font-size'ı, yoksa ebeveyninki ve böyle köke kadar; bu kök, stil sayfası ya da okur değiştirmedikçe 16 px'tir. Bir boyut em olarak verilmişse zincir boyunca çarpın. Bu sıkıcıdır; çoğu ekibin yazı tipi boyutları için rem'de karar kılmasının nedeni budur.
Dönüşümün neyi koruduğu ve neyi koruyamadığı
Metne olan oranı korur
Sonuç, yazdığınız tabanda em'in karşılık geldiği piksel boyutudur. Em olarak yazılmış bir boşluk ya da boyut ait olduğu metni izler ve dönüşüm bunun belirli bir metin boyutu için neye vardığını gösterir.
Sayfa için tek bir cevap veremez
Dikkatli olunması gereken budur: em kökle değil, öğenin kendi yazı tipi boyutuyla ya da font-size için ebeveyninkiyle ilişkilidir. Yani aynı 1,5 em, 16 px'lik bir öğenin içinde 24 px ve 24 px'lik birinin içinde 36 px'tir ve em'in içindeki em çarpılır. Sayfadaki rakam alandaki taban için doğrudur ve başka hiçbir şey için değil. Her yerde geçerli tek bir sayı istiyorsanız rem bunun içindir. İkisini karşılaştırmak için rem'i px'e çevirin ve köke göreli bir birimin nasıl sabit kaldığını görün.
Yuvarlama
Tam sayı bir tabanla çarpmak çoğu değer için kesin sonuçlar verir. Taban ondalıksa, örneğin 13,5 px, 1,2 em gibi bir değer 16,2 px verir. Tarayıcılar kesirli pikselleri ele alır, ama ince çizgi bir kenarlık ya da bir ızgaradaki bir simge için tam piksellere ihtiyacınız olduğunda bilerek yuvarlayın ve nasıl göründüğünü kontrol edin.
İç içe em değerleri nasıl çarpılır
Bir listenin içinde bir liste
Gövde metni 16 px olan bir sayfa düşünün. Bir listenin font-size: 0.875em değeri vardır; bu 14 px'tir. İçindeki öğelerin de font-size: 0.875em değeri vardır; bu 14 × 0,875 = 12,25 px'tir. Bir öğenin içindeki bir liste bunu yine yapar: 10,7 px. Üç düzey derinlikte metin minnacık olur ve kimse öyle olmasına karar vermemiştir. Bir bileşen için em'i px'e çevirirseniz ve cevap çok küçük görünürse iç içe geçme kontrol edilecek ilk şeydir.
Zincirde yukarı yürümek
İç içe em'in gerçek piksel boyutunu bilmek için tabanı aşağı inerken her değerle çarpın: 16 × 0,875 × 0,875 = 12,25. Dönüştürücü bir seferde bir adım yapar. Bir zincir için ilk değeri çevirin, cevabı ikincisi için taban olarak kullanın ve devam edin. Tarayıcının yaptığı aritmetiğin aynısıdır.
Bileşik büyümeyi nasıl durdurursunuz
Yazı tipi boyutları için rem kullanın; böylece her boyut köke başvurur ve em'i boşluklar için tutun; böylece dolgu ve kenar boşlukları kendi öğelerinin metnini izler. Bu birleşimde hiçbir şey bileşik büyümez ve çevirdiğiniz em değerleri her zaman bir bakışta okuyabileceğiniz bir yazı tipi boyutuna göredir.
Yaygın değerler
Sayfanın altındaki tablo
Sayfa, yaygın em rakamlarının ayarladığınız tabanda karşılık geldiği piksel değerlerinin bir tablosunu içerir: 0,5 em 8 px'tir, 0,625 10'dur, 0,75 12'dir, 0,875 14'tür, 1 16'dır, 1,125 18'dir, 1,25 20'dir, 1,5 24'tür, 2 32'dir, 3 48'dir ve 4 64'tür. Varsayılan tabanda bunlar rem ile aynı sayılardır. Tabanı değiştirin ve tablo onunla birlikte değişir; bu, em'in gerçekte ne yaptığını görmenin iyi bir yoludur.
İki tabanı yan yana deneyin
14 tabanıyla 1,5 yazın, sonra 20 tabanıyla. 21 ve 30 piksel elde edersiniz. Em ile rem arasındaki tüm fark tek bir deneyde budur: aynı rakam, iki öğe, iki boyut.
em'i px'e burada nasıl çevirirsiniz
em değerini yazın
Boyutu ilk alana em olarak girin. Ondalıklar kabul edilir; yani 0,714, 1 kadar iyi çalışır.
em'in başvurduğu yazı tipi boyutunu ayarlayın
Öğenin yazı tipi boyutunu ya da özellik font-size ise ebeveyninkini yazın. Emin değilseniz 16'yı bırakın ve sonucu bir yaklaşıklık olarak değerlendirin.
Piksel değerini okuyun
Cevap, yanında gösterilen tabanla birlikte hemen görünür. Notlarınıza kopyalayın ya da tasarım dosyasıyla karşılaştırın.
Bu birimler nereden geliyor
Em
Em, web'den eskidir. Metal dizgide dökülmüş bir bloğun genişliğiydi ve adını büyük M harfinden alır; dizgiciler hâlâ em çizgilerinden ve em boşluklarından söz eder. CSS'te geçerli yazı tipi boyutu demektir; öğeleri iç içe koydukça değişmesinin nedeni budur.
Piksel ve rem
Ekranlar öngörülebilir bir yoğunluğa sahip olmaktan çıktığında gerçek piksellerle ölçülmüş bir sayfa, ekranlar keskinleştikçe küçülen bir sayfa oldu. Bu yüzden CSS pikseli bir referans uzunluk olarak yeniden tanımlandı: rahat bir okuma mesafesinden görülen bir inçin yaklaşık 1/96'sı. Rem, em'in bileşik büyümesinden kaçmak için eklendi: kök öğenin em'idir ve asla çarpılmaz. İkisiyle de çalışıyorsanız diğer yöne gitmek için px'i em'e çevirin.
Geliştiricilerin em'i px'e çevirdiği yerler
Bir yapıyı tasarım dosyasıyla karşılaştırmak
Bir tasarımcı pikselle bir dosya verir ve kod em cinsindendir. Sayfanın eşleştiğini kontrol etmek için her bileşenin yazı tipi boyutunu kullanarak em'i px'e çevirirsiniz. 14 px'lik bir etiketi ve 0.714em 1.429em dolgusu olan bir düğme 10 px ve 20 px çıkmalıdır; tasarım 12 ve 24 diyorsa biri yanlıştır.
Aralık ayıklamak
Bir boşluk çok büyük ya da çok küçük göründüğünde neden genellikle beklediğinizden daha büyük ya da küçük bir yazı tipine başvuran bir em değeridir. Onu öğenin hesaplanmış yazı tipi boyutuyla çevirmek, sorunun aritmetik olup olmadığını hemen söyler.
Yabancı kodu okumak
Devralınan stil sayfaları, piksel boyutlarını yeniden kurmanız gereken em değerleriyle doludur. Ana olanlardan bir avucunu doğru tabanlarla çevirmek size tasarımın bir haritasını verir.
Belge ve test yazmak
Bir sayfayı test eden insanlar gördüklerini pikselle anlatır. Dolgunun 0,9em olduğunu söyleyen bir geliştirici bir test uzmanı için pek bir şey ifade etmez; 12,6 px bir şey ifade eder. Çevirmek iki tarafın birbirini anlamasını sağlar.
em'i px'e çevirirken tuzaklar
Yanlış tabanı kullanmak
En yaygın hata. font-size için ebeveynin boyutunu, diğer tüm özellikler için öğenin kendisininkini kullanın. Tabanı yazmadan önce özelliği kontrol edin.
em olarak bir ebeveyni unutmak
Ebeveynin boyutu kendisi em cinsindense zinciri izlemeniz gerekir. Kestirmeden gitmek için geliştirici araçlarından hesaplanmış değeri kullanın.
Ekranın aynı pikselleri gösterdiğini varsaymak
Bir CSS pikseli bir cihaz pikseli değildir. Yüksek yoğunluklu bir ekranda bir CSS pikseli iki ya da üç cihaz pikseli olabilir. Dönüşüm, tasarım araçlarının ve stil sayfasının paylaştığı birim olan CSS piksellerini verir.
Cevabı bir vaat saymak
Okur metni büyütürse ya da bileşen başka bir yazı tipi boyutuyla yeniden kullanılırsa pikseller, olmaları gerektiği gibi, değişir. Çevrilmiş sayı bir durumu tarif eder, hepsini değil.
Dönüştürmeden önce insanların sorduğu sorular
1 em kaç pikseldir?
Geçerli yazı tipi boyutu kadar: varsayılandaki sıradan gövde metni için 16 px, 24 px'lik bir öğenin içinde 24 px.
2 em kaç pikseldir?
Geçerli yazı tipi boyutunun iki katı. 16 px'te bu 32 px'tir.
Tarayıcım neden farklı bir şey gösteriyor?
Öğenin gerçek yazı tipi boyutu yazdığınız tabandan farklıdır. Geliştirici araçlarında hesaplanmış yazı tipi boyutunu okuyun.
Em, rem ile aynı mı?
Hayır. Em öğeye, rem köke göredir.
Sayım yüklenir mi?
Hayır. Aritmetik tarayıcınızda çalışır ve hiçbir şey bir yere gönderilmez.
Nasıl geri dönerim?
Çarpmak yerine bölen px'ten em'e ile.
Bir em stil sayfasını anlaşılır tutan alışkanlıklar
Tabanı yorumlayın
padding: 0.75em 1.25em; /* 12px 20px at 16px */ gibi bir satır birkaç karaktere mal olur ve bir sonraki okuru bir dönüşümden kurtarır. Varsaydığınız tabanı kaydeder.
Yazı tipi boyutunu bileşen başına bir kez ayarlayın
Bileşenin yazı tipi boyutunu kök öğesinde tanımlayın ve içeride ona em ile başvurun. Taban böylece bileşendeki her değer için aynıdır ve em'i ona karşı güvenle px'e çevirebilirsiniz.
Boşluk için em, yazı için rem tutun
Çoğu stil sayfasının karar kıldığı ayrımdır ve aritmetiği basit tutar. Ekrana göreli boyutlar için px'ten vw'ye ve vw'den px'e araçlardır.
Farklı bir metin boyutunda sınayın
Tarayıcınızdaki varsayılan metin boyutunu yükseltin ve sayfaya bakın. Boşluk metni izliyorsa em değerleri çalışıyordur. İzlemiyorsa bir şey pikselde bırakılmıştır.
Zor durumlar için bir yöntem
Dıştan içe doğru çalışın
Bir bileşen başkalarının derinlerinde olduğunda ve em değerleri kafa karıştırıcı göründüğünde boyutunu bildiğiniz en dıştaki öğeden başlayın ve içeri doğru, bir seferde bir düzey çevirerek çalışın. İlerledikçe her piksel boyutunu bir nota yazın. İki üç düzeyden sonra tüm zincir kâğıttadır ve şaşırtıcı bir sayının tam olarak nereden geldiğini görebilirsiniz. Bir dakika sürer ve bir saatlik tahminin yerini tutar.
Basitleştirip basitleştirmeyeceğinize karar verin
Bir yerleşimi anlamak için em'i dört düzey boyunca px'e çevirmeniz gerekiyorsa stil sayfası size bir şey söylüyordur. Yazı tipi boyutlarını rem'e taşımayı düşünün; böylece her biri köke başvurur ve yalnızca boşluğu em'de bırakır. Sayfa aynı görünür ve gelecek yıl okunması çok daha kolay olur.
İlgili dönüştürücüler
Aynı araç ailesi komşu dönüşümleri kapsar. em'e geri dönmek için px'ten em'e'yi kullanın. Köke göreli boyutlar için px'ten rem'e ve rem'den px'e vardır; ekrana göreli boyutlar için ise px'ten vw'ye ve vw'den px'e. Aynı stil sayfasının renkleri için HEX'ten RGB'ye ve RGB'den HEX'e gösterimleri ele alır.
Çözülmüş bir örnek
Bir düğme bileşenini gözden geçirdiğinizi varsayalım. Etiket 14 px'tir, CSS padding: 0.714em 1.429em ve bir simge ile etiket arasında 0.5em'lik bir boşluk der. Taban olarak 14 yazar, sonra 0,714 yazıp 10 px, 1,429 yazıp 20 px, 0,5 yazıp 7 px okursunuz. Tasarım dosyası 10, 20 ve 8 der. Üçten ikisi eşleşir; bu yüzden boşluğa bakarsınız: 14 tabanında 8 px 0,571 em olurdu ve biri onu 0,5'e yuvarlamış. Bunu gözden geçirmede dile getirirsiniz ve düzeltme tek bir sayıdır.
Kısa bir kontrol listesi
Dönüştürmeden önce
em'in başvurduğu yazı tipi boyutunu geliştirici araçlarından ya da koddaki yazı tipi boyutları zincirinden bulun.
Dönüştürürken
em değerini yazın, tabanı ayarlayın ve pikselleri okuyun; sonucun yanında gösterilen tabanı not edin.
Dönüştürdükten sonra
Tasarım dosyasıyla karşılaştırın. Sayılar farklıysa koddan şüphelenmeden önce tabanı kontrol edin.
Sık yapılan hatalar
Kontrol etmeden 16 kullanmak
Yalnızca öğenin yazı tipi boyutu 16 px olduğunda doğrudur.
em ile rem'i karıştırmak
Benzer görünürler ve farklı davranırlar. Her biri için doğru sayfayı kullanın.
em'in bileşik büyüdüğünü unutmak
İç içe bir öğenin içindeki bir değer görmemiş olabileceğiniz bir boyuta görelidir. Zinciri izleyin.
Sayılarınız cihazınızda kalır
Hesap yerel olarak gerçekleşir. Değerleriniz kendi tarayıcınız tarafından kullanılır ve hiçbir şey bir yere gönderilmez. Sonradan silinecek bir şey ve oluşturulacak bir hesap yoktur. em'i px'e çevirmenin sade yolu budur.
Özet
em'i burada px'e çevirmek için boyutu em olarak ve başvurduğu yazı tipi boyutunu yazın ve sonucu px = em × taban formülüyle hemen piksel olarak okuyun. Dönüşüm, değerin kullanıldığı yerde geçerli olan yazı tipi boyutuna göre oranı korur. Bir sayfa için tek bir cevap veremez: em öğenin kendisine ya da font-size için ebeveyne görelidir; bu yüzden aynı 1,5 em, 16 px'lik bir öğenin içinde 24 px ve 24 px'lik birinin içinde 36 px'tir ve em'in içindeki em çarpılır. Her yerde geçerli tek bir sayı için rem kullanın. Hiçbir şey yüklenmez.