Héritage des propriétés css basées sur la longueur dans l'unité rem à partir de l'élément racine html

Je sais que l'unité rem css est une unité relative utilisée pour dériver des tailles de police à partir de l'élément racine i.e html. Ma question est comment les propriétés css basées sur la longueur comme la largeur, la hauteur, le remplissage, la marge, si spécifié dans rem - pour tout élément dérivé de l'élément HTML.Héritage des propriétés css basées sur la longueur dans l'unité rem à partir de l'élément racine html

À titre d'exemple:

<html class="basicStyle"> 
<body> 
<div id="view">This is some content</div> 
</body> 
</html>

Style:

.basicStyle{width:500px; font-size:20px} 
#view{width:3rem; font-size:2rem}

Si j'essayer cela en chrome, la largeur de la div #view doit être 3 * 500px = 1500px - Cependant, il est pas si.

Je veux savoir si nous spécifions la largeur ou le remplissage d'un élément dans rem - à partir de quel élément et comment est-il calculé - pour obtenir la largeur calculée.

Toute documentation est également la bienvenue.

Merci.

Source

2015-09-10 Prabhas

L'unité rem est égale à la valeur de la font-size sur l'élément racine:

unité de rem
égale à la valeur calculée de la taille des caractères sur l'élément racine. Lorsqu'elles sont spécifiées sur la propriété font-size de l'élément racine, les unités rem font référence à la valeur initiale de la propriété.

longueurs de Font rapport: les em, ex, ch, unités de rem (http://www.w3.org/TR/css3-values/#font-relative-lengths)

Dans ce cas, l'unité rem sera égal à 20px comme cela est le font-size ensemble dans .basicStyle.

Si vous utilisez rem pour calculer la width d'un élément, il ne sera pas basé sur le width de l'élément racine mais le font-size. Dans votre exemple #view aura donc un résultat width de 3 * 20 = 60px.

html { 
 
    font-size: 20px; 
 
    width: 500px; 
 
} 
 
#view { 
 
    width: 3rem; 
 
}

<div id="view">This is some content. If you inspect it the width will be 60px.</div>

Source

2015-09-10 07:37:26

merci. très utile. La taille de police change-t-elle si l'élément html racine change lorsque je redimensionne ma fenêtre d'affichage ou que j'utilise un autre périphérique? – Prabhas

Héritage des propriétés css basées sur la longueur dans l'unité rem à partir de l'élément racine html

Répondre

Questions connexes