Pixels to em
Convert px to em using a parent element's font size. em is relative to the immediate parent — useful when a button's padding should scale with its label text, or a nested list indent follows local body size. Formula: em = px ÷ parentFontSizePx.
Piksel
Üst öğe yazı tipi boyutu (px)
Sonuç
1em
How to convert px to em
1. Identify the parent element's font size in px (e.g. 18 px).
2. Enter the px value to convert (e.g. 9 px letter-spacing).
3. Read em result (9 ÷ 18 = 0.5 em).
4. Apply in CSS on the child element scoped to that parent context.
Px'ten em'e örnekler
Düğme dolgusu
Ana yazı tipi 16 piksel; dikey dolgu 8 piksel → 0,5 em. Büyük ekranlarda üst öğenin 18 piksel olması durumunda ölçeklenir.
İç içe geçmiş başlık
Bölüm yazı tipi 20 piksel; alt başlık 24 piksel tasarım → bölüme göre 1,2 em, köke değil.
Simge hizalaması
Satır içi simge 14 piksel ve 16 piksel metin satırı → 0,875 em simge kutusu, metin ölçümlerine hizalanır.
px'i em'ye ne zaman dönüştürebilirim?
• Bileşenin dahili öğelerinin yerel yazı tipi boyutu değişiklikleriyle ölçeklenmesi gerektiği zaman.
• Başlıkların farklı boyutlardaki kapsayıcıların içinde yer aldığı zengin metni biçimlendirdiğinizde.
• Eski CSS bunları kullandığında ve yeni piksel tasarımlarını aynı sisteme eşlediğinizde.
Ne zaman başka bir şey seçmeli
• Site genelinde tutarlı aralıklar istediğinizde kökten uzaklık daha basittir.
• Derin yuvalama hataların artmasına neden olduğunda, kenar boşlukları için rem'i tercih edin.
• Görünüm alanına göre boyutlandırmaya ihtiyacınız olduğunda vw/vh'yi kullanın.
Tuzakları karmaşık hale getirmekten kaçınmak
Her düzeyde yazı tipi boyutu: 0,9 em olan derinlemesine iç içe geçmiş menüler, metni beklenmedik şekilde küçültür. Yapısal düzeylerde yazı tipi boyutu için rem'i tercih edin; bunları bir ebeveyne bağlı yerel dolgu için kullanın. Tasarım belirteçlerinde üst varsayımları belgeleyin.
medya sorguları için mi?
Medya sorgusu em birimleri geçmişte bileşen üst bileşenine değil, tarayıcı varsayılanına (16 piksel) referans veriyordu. Modern duyarlı tasarım genellikle rem veya px kesme noktalarını kullanır; stil sayfanızın hangi bağlamı hedeflediğini bilin.
Sık sorulan sorular
em ve rem arasındaki fark nedir?
em ana yazı tipi boyutuna atıfta bulunur; rem yalnızca kök (html) yazı tipi boyutuna başvurur.
Yuvalanmış em neden birleşiyor?
Her düzey şunu çarpar: 1,2 em içeride 1,2 em ebeveyn = 1,44 × kök, eğer her ikisi de yazı tipi boyutundaki zincirlere uygulanıyorsa.
Formül mü?
em = px ÷ parentFontSizePx. Daima doğrudan ebeveynin hesaplanan yazı tipi boyutunu kullanın.
İçini doldurmak mı?
Evet — öğenin kendi yazı tipi boyutuyla em ölçeğinde dolgu/kenar boşluğu (kenar boşluğu/dolgu için spesifikasyon öğe yazı tipi boyutunu kullanır).
Ne zaman ortaya çıktılar?
Geleneksel olarak metal türünde "büyük harf M genişliği"; artık CSS'daki yazı tipi boyutuna göre tanımlanıyor.
Veriler yükleniyor mu?
Hayır. Dönüşüm yerel olarak çalışır.