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

CSS : La différence entre Rem et Em

En CSS, les développeurs utilisent souvent différentes unités pour définir la taille des éléments de texte. Deux unités couramment utilisées sont le rem et l'em. Bien que les deux unités soient similaires, elles diffèrent d'une manière cruciale.

Comprendre l'unité Rem

L'unité rem, abréviation de root em, est relative à la police racine taille du site Web. Cela signifie que la taille des éléments utilisant rem restera constante quels que soient les changements de taille de police dans les conteneurs intermédiaires.

Comprendre l'unité Em

Contrairement à rem, le L'unité em est relative à la taille de la police de l'élément parent. Lorsque la taille de la police de l'élément parent change, la taille des éléments utilisant em s'ajustera également en conséquence.

Démonstration

Dans le code CSS suivant :

div {
    font-size: 1.4rem;
}

div p {
    font-size: 1.4rem;
}

L'élément div se voit attribuer une taille de police de 1,4rem, tandis que l'élément p dans le div se voit également attribuer une taille de police de 1,4rem. Si vous deviez augmenter la taille de la police de l'élément div, la taille de la police de l'élément p ne changerait pas car elle est définie à l'aide de rem, qui est relative à la taille de la police racine.

À l'inverse, si vous étiez pour utiliser em au lieu de rem, la taille de la police de l'élément p augmenterait également lorsque vous augmentez la taille de la police de l'élément div. En effet, em est relatif à la taille de police de l'élément parent.

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!