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 sont relatifs à la taille de la police de leur parent.

REM sont relatifs à une taille de police de base

C'est important lorsque les conteneurs intermédiaires changent de taille de police. Les éléments enfants avec des EM seront affectés, ceux utilisant des REM ne le seront pas.

Answer 2

L'unité rem (Root em) représente la taille de la police de l'élément Root. Dans un document HTML, l'élément racine est l'élément html élément.

Answer 3

Alors que em est relative à la taille de la police de son parent direct ou le plus proche, rem est uniquement relative à la taille de la police html (Root).

em donne la possibilité de contrôler une zone d'un dessin ou modèle. Par exemple, vous pouvez mettre à l'échelle les caractères dans cette zone spécifique. rem permet de mettre facilement à l'échelle les caractères sur l'ensemble de la page.

Answer 4

En gros, em est relatif au parent le plus proche en CSS, tandis que is rem est relatif au parent de la page qui est généralement la balise html...

Vous verrez clairement la différence si vous exécutez le css ci-dessous et comment le parent l'affecte :

html {
  font-size: 16px;
}

.lg-font {
  font-size: 30px;
}

p.rem {
  font-size: 1rem;
}

p.em {
  font-size: 1em;
}

<div class="lg-font">
  <p class="em">Hello World - em</p>
</div>

<div class="lg-font">
  <p class="rem">Hello World - rem</p>
</div>

Answer 5

Résumé :

• rem : a CSS qui est relative à la taille de la police de l'écran. html élément.
• em : a CSS qui est relative à la taille de la police de l'écran. parent élément.

Exemple :

.element {
  width: 10rem;
  height: 10rem;
  background-color: green;
  font-size: 5px;
}

.innerElement {
  width: 10em;
  height: 10em;
  background-color: blue;
}

<div class="element">
  <div class="innerElement"></div>
</div>

Dans l'exemple ci-dessus, le carré vert mesure 160px par 160 px (à moins que votre navigateur ne soit réglé par défaut à 16px ). Ceci est dû au fait que le navigateur par défaut de l html élément font-size es 16px y 10rem * 16px = 160.

Le carré intérieur est 10em grand. Parce que son élément parent est 5px le carré est de 5em * 10px = 50px .

En quoi est-ce utile ?

En réglant toutes les unités sur rem présentent les avantages suivants :

• Nous pouvons mettre à l'échelle l'ensemble de notre application à l'aide d'une requête média CSS, dans laquelle nous pouvons spécifier la taille de la police. En modifiant la taille de la police, tous les éléments qui ont l'unité rem s'adaptera en conséquence.
• Lorsque les utilisateurs n'utilisent pas la taille de police par défaut du navigateur, à savoir 16px notre application s'adaptera à la taille de la police sélectionnée par l'utilisateur.