Différents types d'unités relatives CSS

Il existe de nombreux types d'unités relatives en CSS, chacune ayant ses scénarios et caractéristiques applicables. Les unités relatives couramment utilisées sont présentées ci-dessous et quelques exemples de code spécifiques sont fournis.

1. em
   em est une unité calculée par rapport à la taille de la police de l'élément actuel. Par exemple, si la taille de police d'un élément est de 16 px, alors 1em est égal à 16 px. Si la taille de police d'un élément est de 2em, alors sa taille de police est le double de la taille de police de l'élément parent.

p {
  font-size: 16px;
}

span {
  font-size: 0.5em; /* 相当于8px */
}

2. rem
   rem est une unité calculée par rapport à la taille de la police de l'élément racine (c'est-à-dire l'élément html). Il est utilisé de la même manière que em, mais ne sera pas affecté par l'élément parent.

html {
  font-size: 16px;
}

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

3. vw/vh
   vw et vh sont des unités relatives à la largeur et à la hauteur de la fenêtre. 1vw est égal à 1 % de la largeur de la fenêtre et 1vh est égal à 1 % de la hauteur de la fenêtre. Cette unité est souvent utilisée dans la conception réactive pour redimensionner automatiquement les éléments en fonction de la taille de la fenêtre.

div {
  width: 50vw; /* 相当于视窗宽度的50% */
  height: 30vh; /* 相当于视窗高度的30% */
}

4. %
   Les unités de pourcentage sont calculées par rapport à la taille de l'élément parent. Par exemple, si un élément a une largeur de 50 %, sa largeur est la moitié de la largeur de son élément parent.

.container {
  width: 200px;
}

div {
  width: 50%; /* 相当于100px */
}

5. ch
   ch est une unité calculée par rapport à la largeur de la police actuelle. Un ch est égal à la largeur du caractère "0" dans la police actuelle.

p {
  font-size: 16px;
}

span {
  width: 10ch; /* 相当于160px */
}

Résumé :
Les unités relatives fournissent une méthode de mise en page plus flexible et adaptable en CSS. Choisissez l'unité appropriée en fonction de vos besoins. Vous pouvez choisir l'unité relative appropriée en fonction des caractéristiques de l'élément et des besoins de conception. En utilisant rationnellement les unités relatives, des effets de disposition adaptatifs peuvent être obtenus.

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!