Lorsque vous stylisez des éléments en CSS, vous avez le choix entre deux catégories d'unités : unités absolues et unités relatives. Voici une présentation de chacun d'eux et en quoi ils diffèrent :

1. Unités absolues

Les unités absolues sont des unités de mesure fixes. Ils ne sont pas affectés par d’autres éléments ou tailles d’écran, ce qui signifie que leur taille est constante quel que soit le contexte dans lequel ils sont utilisés.

Unités absolues communes :

• px (pixels) : un pixel est un petit carré sur l'écran. C'est l'unité la plus couramment utilisée pour les dispositions fixes.

  • Exemple:

  h1 {
    font-size: 24px;
  }
  

• pt (points) : généralement utilisé dans les médias imprimés, 1 pt équivaut à 1/72 de pouce.

• cm (centimètres) et in (pouces) : rarement utilisées dans la conception Web, ces unités sont basées sur des dimensions physiques.

Avantages des unités absolues :

• Cohérence : la taille sera toujours la même, quel que soit l'appareil ou la taille de l'écran.
• Prévisible : idéal pour créer des mises en page fixes où vous souhaitez que le design soit exactement le même sur toutes les plates-formes.

Inconvénients :

• Manque de flexibilité : les unités absolues ne s'adaptent pas bien aux différentes tailles d'écran ou paramètres de zoom, ce qui les rend moins réactives.

2. Unités relatives

Les unités relatives sont flexibles et évoluent en fonction du contexte dans lequel elles sont utilisées. Leur taille dépend d'autres éléments, tels que le conteneur parent, la fenêtre d'affichage ou la taille de police de base.

Unités relatives communes :

• em : par rapport à la taille de la police de l'élément sur lequel il est utilisé. Si l'élément parent a une taille de police de 16 px, 1em équivaut à 16 px. Si la taille de l'élément parent change, la taille en em changera également.

  • Exemple:

  p {
    font-size: 1.5em; /* 1.5 times the font size of the parent */
  }
  

• rem (root em) : par rapport à la taille de la police de l'élément racine (généralement l'élément ). Cela le rend plus prévisible par rapport à eux.

Par défaut, les navigateurs définissent généralement la taille de la police racine sur 16 px, sauf indication contraire. Si vous définissez une taille de police personnalisée pour l'élément, toutes les valeurs rem seront calculées en fonction de cette nouvelle taille.

• Exemple:
  

  p {
    font-size: 2rem; /* 2 times the root font size */
  }
  

  • % (pourcentage) : par rapport à la taille de l'élément parent. Par exemple, width: 50% donne à l'élément 50 % de la largeur de son conteneur parent.

• Exemple:
  

  div {
    width: 75%; /* 75% of the parent's width */
  }
  

  • vw (largeur de la fenêtre) et vh (hauteur de la fenêtre) : ces unités sont relatives à la fenêtre du navigateur. 1vw correspond à 1 % de la largeur de la fenêtre et 1vh correspond à 1 % de la hauteur de la fenêtre.

• Exemple:
  

  div {
    width: 50vw; /* 50% of the viewport's width */
  }
  

Avantages des unités relatives :

• Conception réactive : les unités relatives évoluent automatiquement en fonction de la taille de l'écran, de la taille de la police ou des dimensions du conteneur, ce qui rend votre conception plus flexible.
• Plus facile à gérer : la modification de la taille de la police de l'élément racine (à l'aide de rem) peut mettre à l'échelle l'ensemble de votre conception.

Inconvénients :

• Peut être plus difficile à contrôler : sans une bonne compréhension de l'héritage et de la façon dont les tailles se répercutent sur les éléments, les unités relatives peuvent parfois produire des résultats inattendus.

Quand utiliser les unités absolues ou relatives

• Les Unités absolues (comme les px) sont les meilleures lorsque vous avez besoin de mesures précises et fixes. Utilisez-les lorsque vous souhaitez que quelque chose ait la même taille partout (par exemple, un petit logo ou une icône).
• Les Unités relatives (comme em, rem, vw et %) sont idéales pour le responsive design. Ils permettent aux éléments d'évoluer et de s'adapter en fonction de la taille de l'écran ou de l'élément parent, ce qui rend votre conception plus flexible.

Exemple : unités absolues ou relatives en pratique

This is 24px text
This is 1.5rem text (24px based on root size)

Dans cet exemple :

• La taille de police absolue (24 px) restera toujours la même.
• La taille de police relative (1,5rem) s'ajustera en fonction de la taille de police racine (16 px), ce qui donne 24 px.

Conclusion:

• Utilisez unités absolues lorsque la cohérence entre les appareils est nécessaire, mais sachez qu'elles ne sont pas réactives.
• Utilisez unités relatives pour des conceptions plus flexibles et plus réactives, en particulier lors du développement pour plusieurs tailles d'écran et appareils.