Unités Em et Rem en CSS ?-tutoriel CSS-php.cn

Unités Em et Rem en CSS ?

PHPz

Libérer： 2023-08-27 13:13:10

avant

810 Les gens l'ont consulté

CSS 中的 Em 与 Rem 单位？

Lors de la définition de la taille d'un élément à l'aide des propriétés CSS, vous remarquerez peut-être deux options, l'une correspond aux unités absolues et l'autre aux unités relatives. Les unités absolues sont les mêmes et fixes, et vous pouvez utiliser cm, mm et px pour définir la taille. Les unités relatives, en revanche, sont relatives à autre chose, qui peut être l'élément parent ou tout autre élément.

Dans ce tutoriel, nous examinerons la comparaison entre les unités em et rem en CSS.

L'unité Em

L'unité

em permet de changer la taille d'un élément par rapport à la taille de police de son élément parent. Cela signifie que si la taille de l'élément parent change, la taille des éléments enfants changera également.

Regardons un exemple pour comprendre ce que fait l'unité em.

Exemple

Dans cet exemple, nous allons changer la taille de la police de l'élément enfant en 35px. Les marges des éléments enfants seront également modifiées en 50px.

Ici, nous avons d'abord créé un élément parent, puis défini sa taille sur 17,5 pixels et la taille de la police de l'élément enfant sur 1em, ce qui signifie que la taille de la police de l'élément enfant sera le double de celle de l'élément parent et la marge de l'élément parent. l’élément restera inchangé. Jetons un coup d'œil à la sortie du code.

Remarque - L'utilisation de la propriété font-size est relative à l'élément père (parent) lorsqu'elle est utilisée sur d'autres propriétés.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Difference between em and rem</title>
   <style>
      .father {
         paddding: 0px;
         font-size: 16px;
      }
      .son {
         margin: 1em;
         font-size: 1em;
      }
   </style>
</head>
<body>
   <div class="father">
      This is the Father element
      <div class="son">
         This is Son element
      </div>
   </div>
</body>
</html>

Copier après la connexion

Dans la sortie ci-dessus, il y a un élément parent et un élément enfant. Dans le résultat, les éléments enfants ont la même taille que l'élément parent

unité rem

L'unité rem est la taille de la police par rapport à la racine de l'élément, c'est-à-dire l'élément html. Si ne spécifie pas de taille de police, la valeur par défaut du navigateur est utilisée, quel que soit l'élément parent, uniquement l'élément racine.

Exemple

Nous conserverons la taille de police de l'élément enfant à 50 px, puis définirons la marge de l'élément à 40 px. La taille de l'unité rem sera relative pour toutes les déclarations contrairement à em.

Dans l'exemple suivant, nous avons d'abord utilisé l'élément racine, puis créé un élément parent et l'élément enfant. Nous avons ensuite défini la taille de la police de l'élément racine sur 18 px et la taille de la police du parent sur 15 px. La police de l'élément enfant a ensuite été définie sur 1,5rem, ce qui signifie le double de la taille de l'élément racine et non de l'élément parent. Regardons le résultat pour voir ce que fait l'unité rem.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>The difference between em and rem units</title>
   <style>
      html {
         font-size: 18px;
      }
      .son {
         font-size: 2rem;
         margin: 1.5rem;
      }
      .father {
         font-size: 13px;
      }
   </style>
</head>
<body>
   <div class="father">
      This is parent
      <div class="son">
         This is Child in rem unit system
      </div>
   </div>
</body>
</html>

Copier après la connexion

Vous pouvez voir dans le résultat ci-dessus que l'élément enfant n'est pas le double de l'élément parent mais c'est le double de l'élément racine.

L'unité em est relative à la taille de police de son parent le plus proche et peut conduire à l'effet de composition. L'unité rem est relative à la taille de la police racine HTML mais elle ne conduit pas à l'effet de composition.

Unités Em et Rem en CSS

Les unités incluent em, vh, vw et rem. Les unités relatives sont également appelées unités évolutives et jouent un rôle important dans la réactivité du site Web. Les unités em et rem sont à la fois évolutives et relatives. par rapport à la taille de la police de l'élément parent dans le document HTML et à l'unité rem, est relative à la racine de la police de l'ensemble du document.

Conclusion

La différence entre les unités em et les unités rem est que les unités em sont calculées par rapport à l'élément parent, tandis que les unités rem sont calculées par rapport à l'élément racine , les deux unités sont des unités relatives et elles contribuent à rendre le site Web réactif. Ces unités aident à définir la taille d'éléments spécifiques.

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!