Comprendre les unités de taille CSS : px, em, rem, %, et plus

En CSS, vous disposez d'une variété d'unités pour contrôler la taille des éléments, des pixels (px) aux pourcentages (%) en passant par les unités relatives comme em et rem. Choisir la bonne unité pour votre conception peut être crucial pour créer des aménagements réactifs et accessibles. Ce guide couvre les unités de taille CSS les plus courantes, quand les utiliser et leur impact sur votre mise en page.

---

1. Pixels (px)

Les pixels sont l'une des unités absolues les plus courantes en CSS. Un px représente un pixel physique sur l'écran. Puisqu'il est corrigé, l'utilisation de px signifie que l'élément restera de la même taille quels que soient les paramètres de l'utilisateur.

Quand utiliser px :

• Utilisez px pour des éléments précis et fixes comme des icônes ou des bordures.
• Évitez les px pour le texte, car cela peut affecter l'accessibilité lorsque les utilisateurs ajustent les niveaux de zoom du navigateur.

Exemple :

p {
  font-size: 16px;
  width: 200px;
}

---

2. Pourcentages (%)

L'unité % est relative, ce qui signifie qu'elle s'ajuste en fonction de la taille de l'élément parent. Cette flexibilité fait de % un outil essentiel pour la conception réactive, en particulier pour les mises en page fluides où les éléments sont redimensionnés en fonction de la fenêtre d'affichage.

Quand utiliser % :

• Utilisez % pour les éléments de mise en page tels que les conteneurs ou les images qui doivent s'ajuster par rapport à leur conteneur parent.
• Combinez % avec les requêtes multimédias pour créer des conceptions fluides et réactives.

Exemple :

.container {
  width: 80%; /* 80% of the parent element's width */
}

---

3. unités em

L'unité em est une unité relative basée sur la taille de police de son élément parent le plus proche. Si aucune taille de police parent n'est définie, la taille de police de base du navigateur est définie par défaut (généralement 16 px).

Points clés :

• 1em est égal à la taille de la police de l'élément parent.

• 1em fait deux fois la taille, et ainsi de suite.

• Soyez prudent avec l'imbrication, car les valeurs em peuvent se multiplier lorsqu'elles sont appliquées à des éléments imbriqués.

Quand les utiliser :

• Pour les ajustements d'espacement, de remplissage ou de marge par rapport à la taille du texte.

• Pour les tailles de police dans les composants qui doivent s'ajuster par rapport à la taille du texte de leur parent.

Exemple :

.container {
  font-size: 16px;
}

.child {
  padding: 1.5em; /* 1.5 times the font size of .container */
}

---

4. unités rem

Contrairement à em, l'unité rem est basée sur la taille de police de l'élément racine (), ce qui signifie que 1rem est cohérent dans tout le document (souvent 16 px, sauf si personnalisé). Cela fait de rem une unité fiable pour une typographie et un espacement cohérents sur une page Web.

Quand utiliser rem :

• Pour des tailles de police cohérentes entre les composants, quels que soient les éléments imbriqués.

• Pour obtenir une conception plus évolutive et maintenable avec un point de référence clair.

Exemple :

p {
  font-size: 16px;
  width: 200px;
}

---

5. Unités de fenêtre (vw et vh)

Les unités de fenêtre – vw (largeur de la fenêtre) et vh (hauteur de la fenêtre) – sont des unités réactives en fonction de la taille de la fenêtre (fenêtre du navigateur). 1vw est égal à 1 % de la largeur de la fenêtre et 1vh est égal à 1 % de la hauteur de la fenêtre.

Quand utiliser vw et vh :

• Pour les éléments qui doivent s'adapter à la taille du navigateur, comme les sections de héros pleine page.

• Pour créer une typographie réactive qui s'ajuste en fonction de la largeur de l'écran.

Exemple :

.container {
  width: 80%; /* 80% of the parent element's width */
}

---

6. Unités de longueur flexibles (min, max et pince)

Les unités plus récentes telles que min(), max() et clamp() sont puissantes pour une conception réactive, permettant un dimensionnement conditionnel basé sur la valeur la plus petite ou la plus grande.

min(a, b) : prend la plus petite de deux valeurs.
max(a, b) : prend la plus grande des deux valeurs.
clamp(min, favorite, max) : définit une valeur qui s'adapte dans une plage définie.

Quand utiliser :

• Pour une typographie réactive qui s'inscrit dans une plage spécifique.
• Pour dimensionner les composants en fonction de la fenêtre mais avec une limite minimale ou maximale.

Exemple :

.container {
  font-size: 16px;
}

.child {
  padding: 1.5em; /* 1.5 times the font size of .container */
}

---

Conclusion

Chaque unité CSS a ses propres atouts et ses cas d'utilisation idéaux :

• px pour des éléments précis et fixes.
• % pour les composants de mise en page fluides et réactifs.
• em pour la mise à l'échelle par rapport aux éléments parents.
• rem pour une mise à l'échelle cohérente sur toute la page.
• Unités de fenêtre pour les éléments dynamiques basés sur une fenêtre.
• Unités flexibles comme clamp() pour un style adaptatif et conditionnel.

La maîtrise de ces unités CSS peut vous aider à créer des mises en page flexibles, accessibles et maintenables. Mélangez-les et associez-les en fonction de vos besoins de conception et regardez votre mise en page prendre vie ! Bon style !

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!