CSS - Unités

Pixels (px)

Les pixels (px) sont une unité de taille fixe utilisée en CSS. Ils ne changent pas de taille par rapport aux autres éléments ou à la fenêtre d'affichage. Un pixel représente un seul point sur l'écran.

Lorsque vous utilisez des pixels, vous spécifiez une taille exacte pour un élément. Par exemple, définir la largeur d'un div à 200px le rendra exactement large de 200 pixels, quelle que soit la taille de l'écran ou sa résolution.

.container {
  width: 300px;
  height: 200px;
  font-size: 16px;
}

Avantages de l'utilisation des pixels :

• Contrôle précis sur les tailles des éléments
• Apparence cohérente sur différents appareils avec la même densité de pixels
• Faciles à comprendre et à utiliser pour les débutants

Inconvénients de l'utilisation des pixels :

• Manque de flexibilité et de réactivité
• Peuvent apparaître trop petits ou trop grands sur des appareils avec des densités de pixels différentes
• Non évolutifs pour les utilisateurs qui ont besoin de zoomer ou dézoomer

Malgré ces inconvénients, les pixels sont encore largement utilisés pour certains éléments qui nécessitent des tailles exactes, comme les images, les icônes et les bordures. Cependant, pour la typographie et la mise en page, il est généralement recommandé d'utiliser des unités relatives pour obtenir une meilleure réactivité et accessibilité.

Pourcentages (%)

Les pourcentages sont des unités en CSS qui permettent de définir les tailles et les positions des éléments par rapport à leur conteneur parent. La taille d'un élément définie en pourcentage sera une fraction de la taille de son élément parent.

Pour calculer la taille réelle d'un élément en utilisant des pourcentages, multipliez la valeur en pourcentage par la dimension correspondante de l'élément parent. Par exemple, si un élément parent a une largeur de 500px et que son enfant a une largeur définie à 50%, la largeur réelle de l'enfant sera de 250px (50% de 500px).

.parent {
  width: 500px;
}

.child {
  width: 50%;
  padding: 10%;
}

L'enfant aura une largeur de 250px (50% de la largeur de son parent) et un remplissage de 50px (10% de la largeur de son parent).

Em (em)

L'unité em est basée sur la taille de police d'un élément. Un em est égal à la taille de police de l'élément. Si un élément a une taille de police de 16px, alors un em est égal à 16px pour cet élément.

Lorsqu'on utilise em pour des propriétés autres que la taille de police, la valeur est calculée par rapport à la taille de police. Cela signifie que si vous changez la taille de police, les tailles spécifiées en em changeront également proportionnellement.

.container {
    font-size: 16px;
}

.heading {
    font-size: 2em; /* 32px (2 * 16px) */
    margin-bottom: 1.5em; /* 24px (1.5 * 16px) */
}

Le titre aura une taille de police de 32px (2 fois la taille de police de son parent) et une marge inférieure de 24px (1,5 fois sa propre taille de police).

Rem (rem)

L'unité rem (root em) est similaire à em, mais elle est toujours relative à la taille de police de l'élément racine (html), plutôt qu'à la taille de police de l'élément lui-même. Cela rend les valeurs rem cohérentes dans tout le document, indépendamment du niveau d'imbrication ou des changements locaux de taille de police.

Par défaut, la plupart des navigateurs ont une taille de police racine de 16px. Donc, si vous définissez la taille d'un élément à 1.5rem, elle sera calculée comme 1.5*16=24 pixels.

html {
   font-size: 16px;
}

.container {
   font-size: 1.2rem; /* 19.2px (1.2 * 16px) */
   padding: 2rem; /* 32px (2 * 16px) */
}

L'élément container aura une taille de police de 19.2px et un remplissage de 32px, quelle que soit la taille de police de son parent.

L'utilisation de rem pour dimensionner et espacer les éléments aide à maintenir la cohérence et facilite la mise à l'échelle de l'ensemble du design en ne changeant que la taille de police racine.

Unités de fenêtre d'affichage (vw, vh, vmin, vmax)

Les unités de fenêtre d'affichage sont basées sur la taille de la fenêtre d'affichage (la zone visible d'une page web). Il existe quatre unités de fenêtre d'affichage en CSS :

• vw (largeur de fenêtre) : un vw est un pour cent de la largeur de la fenêtre d'affichage.
• vh (hauteur de fenêtre) : un vh est un pour cent de la hauteur de la fenêtre d'affichage.
• vmin (minimum de fenêtre) : un vmin est la plus petite dimension entre vw ou vh.
• vmax (maximum de fenêtre) : un vmax est la plus grande dimension entre vw ou vh.

Ces unités sont utiles pour créer des designs responsifs car elles permettent aux éléments de s'adapter automatiquement à différentes tailles d'écran.

.hero {
   width: 100vw;
   height: 50vh;
   font-size: 5vmin;
}

L'élément hero aura une largeur égale à 100% de la largeur de la fenêtre d'affichage, une hauteur égale à 50% de la hauteur de la fenêtre d'affichage, et une taille de police égale à cinq pour cent de la plus petite dimension entre la hauteur ou la largeur.

En utilisant les unités de fenêtre d'affichage, vous pouvez créer des éléments qui s'adaptent proportionnellement à la taille de la fenêtre d'affichage, rendant votre design plus réactif et adaptable à différents appareils et tailles d'écran. Voici la traduction en français :

Ex (ex)

L'unité ex est une unité relative en CSS basée sur la hauteur x de la police actuelle. La hauteur x est la hauteur des lettres minuscules (comme "x") dans une police, excluant les ascendantes et les descendantes. Un ex équivaut à la hauteur x de la police.

L'unité ex n'est pas aussi courante que des unités comme em ou rem, mais elle peut être utile lorsque vous souhaitez dimensionner des éléments par rapport à la hauteur x d'une police.

Pour calculer la valeur de ex, multipliez la taille souhaitée par la hauteur x de la police. Si la hauteur x d'une police est de 8px et que vous voulez qu'un élément soit 3 fois plus haut, définissez sa taille à 3ex (ce qui serait 24px).

.container {
  font-size: 16px;
}

.example {
  width: 10ex;
  height: 2ex;
  border: 1px solid black;
}

La largeur de .example sera dix fois la hauteur x de la police, et sa hauteur sera deux fois cette hauteur.

Ch (ch)

L'unité ch est une autre unité relative en CSS qui représente la largeur du caractère "0" (zéro) dans les polices actuelles. Elle est utile lorsque vous voulez dimensionner des éléments en fonction des caractères.

Un ch équivaut à la largeur du caractère "0" dans les polices. Cela la rend pratique pour définir les largeurs des champs de saisie ou des conteneurs de texte pour qu'ils s'adaptent à un certain nombre de caractères.

Pour calculer la valeur de ch, multipliez le nombre souhaité de caractères par la largeur du caractère "0" dans les polices. Si le caractère "0" fait environ huit pixels de large et que vous voulez qu'un champ de saisie contienne vingt caractères, définissez sa largeur à vingt ch, ce qui équivaudrait à cent soixante pixels.

.container {
    font-size: 16px;
}

.input-field {
    width: 20ch;
    padding: 0.5em;
    border: 1px solid #ccc;
}

Le .input-field a une largeur qui s'adapte à environ vingt caractères, en supposant que le caractère "0" fait environ huit pixels de large dans la police choisie.