HesapHanem

em’den Piksele Dönüştürücü

em cinsinden bir değer ve temel yazı boyutunu girin; piksele çevirin.

Nasıl hesaplanır?

Dönüşüm tek bir çarpmadır:

piksel = em × temel yazı boyutu (px)

Temel değer, em'in ölçüldüğü öğenin piksel cinsinden yazı boyutudur. Boş bırakırsanız araç tarayıcının olağan varsayılanı olan 16'yı kullanır. Temel sıfırdan büyük olmalıdır; em değeri herhangi bir sayı olabilir, kenar boşluğu için eksi de olabilir. Sonuç iki ondalığa yuvarlanır. Araç iç içe etkiyi hesaplamaz: bir öğenin em değeri kendisi de em kullanan bir üst öğeye göreyse önce üst öğenin piksel boyutunu bulup onu temel olarak girin.

Örnek hesaplama

Yazı boyutu 18px olan bir kapsayıcı içinde bir paragraf 1,5em olarak ayarlanmış. Piksel = 1,5 × 18 = 27,00 px. Varsayılan 16px temelde aynı 1,5em 24 px olurdu; temelin neden önemli olduğu buradan görülür.

Bu örneği dene →

Sık yapılan hatalar

  • 1em'in her zaman 16px olduğunu sanmak; ilgili öğenin yazı boyutuna eşittir, bu 18, 20 ya da başka bir değer olabilir.
  • İç içe geçmeyi unutmak. 1,2em bir kapsayıcı içindeki 1,2em bir liste özgün boyutun 1,44 katına çıkar; temel olarak üst öğenin gerçek piksel boyutunu kullanın.
  • em ile rem'i karıştırmak: rem her zaman kök öğenin boyutuna, em öğenin kendi ya da üst öğesinin boyutuna bağlıdır.
  • em padding veya margin için kullanılmışken sonucu font-size gibi yorumlamak. Bu özelliklerde em, öğenin kendi yazı boyutuna göredir.
  • Temeli yüzde veya em olarak yazmak; alan piksel bekler.

Bu hesaplama hakkında

em, yazı tipi boyutuna bağlı göreli bir CSS ölçü birimidir: 1em, uygulandığı elemanın geçerli font-size değerine (font-size'ın kendisi için kullanıldığında ise üst elemanın font-size'ına) eşittir. Tarayıcılar kök font-size'ı varsayılan olarak 16px alır, dolayısıyla varsayılan ayarda 1em = 16px'dir ve genel formül px = em × taban yazı boyutu şeklindedir — 16px tabanda 2em olarak ayarlanan bir başlık 32px'e karşılık gelirken, aynı 2em değeri 18px tabanda 36px eder.

em birimi, kullanıcının veya üst elemanın yazı boyutuna göre ölçeklendiği için CSS geliştiricilerinin duyarlı ve erişilebilir tipografide — satır yüksekliği, kenar boşlukları, kullanıcı tarayıcı yazı boyutunu büyüttüğünde de büyümesi gereken font-size değerlerinde — tercih ettiği birimdir. Piksel tabanlı bir tasarım taslağını (Figma, Sketch) ölçeklenebilir, erişilebilir CSS koduna çevirirken em-piksel dönüşümü sık karşılaşılan bir adımdır.

Bu faydalı oldu mu?

En fazla 3 tepki seçebilirsiniz.

Yorumlar (1)

  • Editör ekibi

    Tasarım taslağından ters yöne geçmek elle yapabileceğiniz tek bir bölmedir: em, pikselin taban değere bölümüne eşittir; yani varsayılan 16 piksellik tabanda 20 pikselik bir etiket 1,25 em eder. Bu sayfa yalnızca çarpar, bu yüzden değeri doğrulamak için 1,25 girip 20,00 px çıktığını görebilirsiniz. 27,2 px gibi kesirli sonuçlar normaldir, çünkü tarayıcılar yazıyı alt piksel hassasiyetiyle yerleştirir. Projenizde taban yazı boyutu kaç piksel?

Popüler hesaplayıcılar

Kredi Hesaplama

Aylık taksit, toplam faiz ve ödeme planını hesaplayın.

Yüzde Hesaplama

Yüzde değişim, indirim ve oran hesaplamaları.

İndirim Hesaplama

İndirimli fiyatı, kazancı ve indirim tutarını hesaplayın.

Vücut Kitle Endeksi (VKİ)

Boy ve kiloya göre vücut kitle endeksini hesaplayın.

Yaş Hesaplama

Doğum tarihinden bugüne tam yıl, ay ve gün cinsinden yaşınızı hesaplayın.

Bileşik Faiz Hesaplama

Ana para, faiz oranı ve süreye göre bileşik faizle nihai tutarı hesaplayın.

Tüm Hesaplayıcılar