recherche

Maison >interface Web >tutoriel CSS >Quelle est la différence entre rem et em en CSS ?

Quelle est la différence entre rem et em en CSS ?

Patricia Arquette
Patricia Arquetteoriginal
2024-11-05 13:28:02715parcourir

What is the difference between rem and em in CSS?

Différencier rem d'em en CSS

En CSS, les tailles de police peuvent être définies à l'aide de différentes unités, parmi lesquelles rem et em sont couramment rencontrés . Bien que les deux unités servent à définir des tailles de police relatives, elles diffèrent sur un aspect crucial : leur point de référence relatif.

Comprendre em

L'unité em est relative à la taille de la police de son élément parent. Cela signifie que si l'élément parent a une taille de police de 14 px, l'élément enfant avec une taille de police de 1,4 em aura une taille de police de 1,4 * 14 px = 19,6 px.

Comprendre rem

En revanche, l'unité rem est relative à une taille de police de base. Cette taille de police de base est généralement définie dans le champ élément ou via une variable CSS. Si la taille de police de base est définie sur 16 px, toutes les valeurs rem seront calculées par rapport à cette taille. Par conséquent, l'élément enfant avec une taille de police de 1,4rem dans notre exemple aura une taille de police de 1,4 * 16px = 22,4px.

Impact sur les éléments imbriqués

Cette distinction devient significative lorsqu'il s'agit de conteneurs imbriqués qui modifient la taille de leur police. Les éléments enfants définis dans ems hériteront de la taille de police modifiée de leur parent, tandis que ceux définis dans rems conserveront leur taille relative par rapport à la taille de police de base.

Exemple

Dans l'extrait de code fourni :

<code class="html"><div>Hello <p>World</p></div></code>
<code class="css">div {
    font-size: 1.4rem;
}

div p {
    font-size: 1.4rem;
}</code>

La taille de la police du

L'élément est défini sur 1,4rem par rapport à la taille de police de base. Le

élément dans le

a également une taille de police de 1,4rem, mais elle est relative à la taille de police du
, qui est de 1,4 * 16px.

Si nous modifions la taille de police du

à 20px, la taille de la police du

L'élément augmentera à 28 px, car il est calculé comme 1,4 * 20 px. Cependant, le paramètre

La taille de police de l'élément restera à 22,4 px, car elle est relative à la taille de police de base et n'est pas affectée par le changement de taille de police de
.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css html if while using this
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment calculer la largeur de la fenêtre (vw) à l'exclusion de la barre de défilement en CSS ?Article suivant：Comment calculer la largeur de la fenêtre (vw) à l'exclusion de la barre de défilement en CSS ?

Articles Liés

Voir plus