En quoi rem diffère-t-il de em en CSS ?

Question

Dans les sources des sites web, j'ai parfois vu des développeurs utiliser l'option rem unité. Est-il similaire à em ? Je l'ai essayé pour voir ce qu'il fait réellement, mais à quoi est-il relatif ?

Démo

HTML

<div>Hello <p>World</p></div>

CSS

div {
    font-size: 1.4rem;
}

div p {
    font-size: 1.4rem;
}

Answer 1

EM est relative à la taille de la police de son parent direct ou le plus proche, et REM est uniquement relative à la taille de la police html (Root).

Answer 2

Le principal problème réside dans l'utilisation de 'em' et 'rem' lorsqu'il existe une police mère de taille..... **Voici l'exemple : Supposons que je veuille une taille de police de 2em pour le corps de mon site web, nous incluons donc une taille de police de 2em dans le corps, ce qui est connu comme la taille de police parente ... et encore pour mon H1 je veux une taille de 5.6 quelque chose et après avoir appuyé sur sauvegarder et retourner à notre site web et rafraîchir alors nous remarquerons que notre H1 est maintenant devenu plus que 5.6 . Cela se produit parce que les polices sont héritées et ajoutées par-dessus ce qu'elles ont obtenu de leur parent.... (ces problèmes vont se produire lorsque nous utilisons des em et des pourcentages). donc, pour sortir de ce type de problèmes les programmeurs utilisent rem.