Unités absolues ou relatives en CSS

Lorsque vous stylisez des éléments en CSS, vous avez le choix entre deux catégories d'unités : les unités absolues et les 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 aménagements 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 de sites 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 la 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 d'affichage 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 à maintenir : 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

<style>
  .absolute {
    font-size: 24px; /* Absolute unit */
  }

  .relative {
    font-size: 1.5rem; /* Relative unit */
  }

  /* Root font size: 16px */
  html {
    font-size: 16px;
  }
</style>

<h1 id="This-is-px-text">This is 24px text</h1>
<h1 id="This-is-rem-text-px-based-on-root-size">This is 1.5rem text (24px based on root size)</h1>

Dans cet exemple :

• The absolute font size (24px) will always remain the same.
• The relative font size (1.5rem) will adjust based on the root font size (16px), resulting in 24px.

---

Conclusion:

• Use absolute units when consistency across devices is needed, but be aware they are not responsive.
• Use relative units for more flexible and responsive designs, especially when developing for multiple screen sizes and devices.

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!