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

Voici un exemple. divs dimensionné avec rem changent comme nous changeons le font-size de la html élément. Alors que ceux qui sont dimensionnés avec em ne changent que si nous changeons le font-size de la div .

$(function() {
  var htmlSize = $('input#html');
  htmlSize.change(function() {
    $('html').css('font-size', htmlSize.val() + 'px');
  });

  var divSize = $('input#div');
  divSize.change(function() {
    $('div').css('font-size', divSize.val() + 'px');
  });
});

* {
  float: left;
  font-size: 20px;
  margin:2px;
}
label {
  clear:both;
}
div {
  border: thin solid black;
}
div.rem1 {
  width:4rem;
  height: 4rem;
  clear: both;
}
div.rem2 {
  width: 3rem;
  height: 3rem;
}
div.em1 {
  width: 4em;
  height: 4em;
  clear: both;
}
div.em2 {
  width: 3em;
  height: 3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Change html font-size
  <input id="html" type='number' value="20" min="18" max="30" />
</label>
<div class="rem rem1">rem</div>
<div class="rem rem2">rem</div>
<label>Change div font-size 
  <input id="div" type='number' value="20" min="18" max="30" />
</label>
<div class="em em1">em</div>
<div class="em em2">em</div>

Answer 2

En em unité relative la taille de la police est mesurée sur la base de la taille de la police du parent le plus proche mais si la taille de la police n'est pas définie pour l'un des éléments parents, la taille de la police sera définie par défaut en fonction de l'option Élément html racine

El rem l'unité relative est calculée uniquement par Élément html racine La taille de la police de l'élément parent ne l'affecte donc pas.

Answer 3

Quelques exemples de CSS pour montrer comment rem fonctionnera, remarquez que le Racine la taille de la police est définie en utilisant px via html étiquette

html, body { font-size: 16px; }
div { font-size: 18px; }
p { font-size: 1rem; }

Et le HTML correspondant :

<div>
  <p>Lorem Ipsum</p>
</div>

Parce que le <p> est réglé sur 1rem il ignore le parent div’s la taille de la police de 18px . Cependant, si nous définissons plutôt la taille de la police à 1em le paragraphe hériterait de l'élément 18px la taille de la police de son élément parent. Je sais que cet exemple n'est pas particulièrement utile, mais j'espère qu'il peut aider à illustrer la différence entre em y rem .

Answer 4

Em et rem sont des unités relatives basées sur les polices de caractères et il est différent d'utiliser ems pour les polices ou pour la longueur, donc ems et rems sont tous deux basés sur les polices de caractères mais la différence entre eux est que ems utilise l'attribut parent ou le actuel comme référence, tandis que rems utilise la taille de la police racine comme référence.

Si nous voulons utiliser des ems pour les tailles de police, la référence est simplement la taille de police calculée par les parents, comme c'est le cas pour les pourcentages.

Dans l'exemple ci-dessous, une taille de police de trois em sur l'élément enfant header donne 72 pixels, tout simplement parce qu'il s'agit de trois fois la taille de la police parent, soit (150/100)*16=24px. Pour la longueur, c'est un peu différent. Le remplissage de 2em sur l'en-tête, puisqu'il s'agit d'une mesure de longueur, utilise la taille de police de l'élément actuel comme référence et nous savons déjà qu'elle est de 24 pixels, donc 2em donnera un remplissage de 48 pixels, compris ? C'est une différence subtile, mais importante. Lorsque vous utilisez em, si c'est pour les polices, la référence est le parent et pour la longueur, la référence est l'élément actuel.

html,body{
font-size:16px;
width:80vw;
}
header{
font-size:150%;
padding 2em;
margin-bottom:10rem;
height:90vh;
widht 1000px;
}
header-child{
font-size:3em;
padding:10%;
}

En ce qui concerne le rem, il fonctionne en fait de la même manière pour les tailles de police et les longueurs car il utilise toujours la taille de police racine comme référence. Cela signifie que le remplissage de 10 rem que nous avons ici donnera 160 pixels car la taille de la police racine est de 16.

Answer 5

Unités de mesure CSS : em , rem tous deux par rapport à la taille frontale de leurs parents. La taille changera en fonction de la taille de la police de ses parents. Exemple :
rem : 100% de la taille de la police de l'élément racine.
em : 100% de la taille de la police Parent.