Yükseklik veya sınır yarıçapı için CSS em ölçümü nasıl ölçülür?

Question

"em" ölçümünün, px gibi bir mutlak birimde veya tarayıcıdaki varsayılan yazı tipi boyutunda belirtilmişse, içeren öğenin font boyutuna göre font boyutu için göreli bir birim olduğunu anlıyorum.

Ancak, bir kutu öğesi, bir kutu öğesinin sınır yarıçapı için bir ölçüm olarak kullanılmasının nasıl çalıştığını anlamaya çalışıyorum. Bir kutu çalışmasının genişliği veya yüksekliği için bir ölçüm olarak nasıl kullanıldığına bağlı olduğunu varsayıyorum.

Hala yazı tipi boyutu ile ilgili mi? Özellikle, nasıl ölçülür? Kenar-yarıçapının nasıl hesaplandığını hesaplayabildim, px birimlerine dayanıyormuş gibi görünüyor.

Answer 1

Sorunu yanlış anlayabiliyorum, ama sanırım böyle çalışıyor. Yazı tipi boyutu 12px ise ve 1em kenarlıklı bir kutu oluşturursanız, 12px'lik bir sınır yarıçapına sahip olur (13px ise 13px). Bu, metnin boyutuna bakılmaksızın metne aynı oranda kalmak için kutunun kenarlık yarıçapına ihtiyaç duyarsanız kullanışlıdır. kutu neredeyse tamamen yuvarlak köşeler vardı sanki

<style> 
    // lets say the browser gives the text a default size of 16px on a pc 
    .box {border-radius:5px}// lets say the box's size scales with the text 
</style> 

O görünecektir: Eğer içinde metni içeren bir kutu olsaydı anları için, diyelim. Ama bir iphone üzerinde söyleyelim, bu metin, varsayılan bir boyutu 80px (abartı) verir, sanki kutu neredeyse düz köşelere sahipmiş gibi görünür. Çözüm, kutunun köşelerini, kullanarak metinle ölçeklendirmektir.

Answer 2

Yazı tipi boyutu ile ilgili gibi görünüyor. Sonunda hala bir ölçüm birimi, px gibi.

Bu example, nasıl çalıştığına dair daha iyi bir fikir verebilir.

Biçimlendirme:

<div id="A"></div> 
<div id="B"></div> 
<div id="text-height"></div> 
<p>Some text</p> 

<div id="C"></div> 
<div id="D"></div> 

CSS:

p { 
    line-height: 1em; 
    background: grey; 
    display: inline-block; 
    position: relative; 
    top: -4px; 
} 
#A { 
    height: 4em; 
    background: red; 
    width: 1em; 
    display: inline-block; 
} 
#B { 
    height: 2em; 
    background: blue; 
    width: 1em; 
    display: inline-block; 
} 
#text-height { 
    height: 1em; 
    background: green; 
    width: 1em; 
    display: inline-block; 
} 
#C, #D { 
    height: 4em; 
    width: 4em; 
    display: inline-block; 
} 
#C { 
    border-radius: 2em; 
    background: red; 
} 
#D { 
    border-radius: 1em; 
    background: blue; 
} 

Resim:

Answer 3

Bunu tarayıcıda ve it is still relative to the font-size property of the element'da denedim. Yazı tipi boyutu tanımlanmamışsa, yazı tipi boyutuna sahip bir sonraki üst öğeden veya tarayıcı varsayılanlarına (which is 16px usually; TIL) sahiptir.