Quelles sont les unités relatives en CSS

CSS a de nombreuses unités relatives, les plus courantes sont le pixel (px), le pourcentage (%), l'em (em) et le rem (rem). Ces quatre unités relatives seront présentées ci-dessous et des exemples de codes spécifiques seront donnés.

1. Pixels (px) :
   Les pixels sont des unités relatives à la résolution de l'écran. Sa valeur est fixe et ne changera pas en fonction des paramètres de l'utilisateur. Par exemple, si vous définissez la largeur d'un élément sur 100 pixels, sa largeur restera de 100 pixels.

Exemple de code :

div {
  width: 100px;
  height: 50px;
}

2. Pourcentage (%) :
   Le pourcentage est une unité relative à l'élément parent, et sa valeur changera en fonction de la taille de l'élément parent. En d’autres termes, les unités de pourcentage peuvent ajuster automatiquement la taille des éléments en fonction des changements de taille de l’écran. Par exemple, si la largeur de l'élément parent est de 200 px et que vous définissez la largeur de l'élément enfant sur 50 %, alors l'élément enfant occupera la moitié de la largeur de l'élément parent.

Exemple de code :

.parent {
  width: 200px;
}

.child {
  width: 50%;
  height: 50px;
}

3. em (em) :
   em est une unité relative à la taille de police de l'élément. Par exemple, si la taille de police d'un élément est de 16 px, alors 1em équivaut à 16 px, 2em équivaut à 32 px, et ainsi de suite. L'unité em peut facilement réaliser un ajustement relatif de la taille de la police.

Exemple de code :

p {
  font-size: 16px;
}

span {
  font-size: 1.5em; /* 相当于24px */
}

4. rem (rem) :
   rem est similaire à em, mais c'est la taille de la police par rapport à l'élément racine (fait généralement référence à l'élément html). L'unité rem peut contrôler uniformément la taille de la police sur toute la page, tout en permettant également un ajustement relatif.

Exemple de code :

html {
  font-size: 16px;
}

p {
  font-size: 1.5rem; /* 相当于24px */
}

Résumé :
Les unités relatives en CSS sont le pixel (px), le pourcentage (%), l'em (em) et le rem (rem). Les unités de pixels sont fixes et ne changeront pas en fonction des paramètres utilisateur. Les unités de pourcentage changent par rapport à la taille de l'élément parent. Les unités Em sont des unités relatives à la taille de police de l'élément lui-même, tandis que les unités rem sont des unités relatives à la taille de police de l'élément racine. Dans les applications pratiques, nous pouvons choisir des unités relatives appropriées pour contrôler la taille des éléments et la taille des polices selon les besoins.

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!