Comprendre les unités de mesure en CSS
En CSS, les unités de mesure permettent de définir les tailles d’éléments, notamment pour le texte. Certaines unités sont fixes (absolues), d’autres sont relatives, ce qui les rend adaptatives en fonction du contexte.
Note importante avant de commencer
Pour effectuer vos tests, vous devez inclure un en-tête HTML minimal dans votre fichier. Cela garantit que certains codes, notamment ceux utilisant les unités relatives comme rem, se réfèrent correctement à la balise <html>.
Tapez ! suivi de la touche Entrée dans VS Code pour générer automatiquement un fichier HTML de base.
Les unités de mesure en CSS
Les unités absolues : pixels
Les pixels sont une unité fixe. La taille reste constante quel que soit l’appareil ou la résolution de l’écran.
HTML :
<p class="pixels">Texte avec une taille en pixels.</p>CSS :
.pixels {
font-size: 16px;
}Les unités relatives : pourcentages
Les pourcentages permettent de définir des tailles relatives par rapport à l’élément parent.
HTML :
<p class="pourcentage">Texte avec une taille relative en pourcentage.</p>CSS :
.pourcentage {
font-size: 100%; /* Taille égale à celle du parent */
}Les unités relatives : em et rem
em : relatif à l’élément parent
La taille définie en em dépend directement de la taille de l’élément parent.
HTML :
<p class="parent">Parent (16px)
<span class="child-em">Enfant (1.5em)</span>
</p>CSS :
.parent {
font-size: 16px;
}
.child-em {
font-size: 1.5em; /* Taille = 16px * 1.5 = 24px */
}rem : relatif à l’élément racine
La taille définie en rem dépend de la taille spécifiée dans l’élément <html>, ce qui garantit une cohérence globale.
HTML :
<p class="rem-example">Texte en rem (2rem)</p>CSS :
html {
font-size: 16px; /* Base pour rem */
}
.rem-example {
font-size: 2rem; /* Taille = 16px * 2 = 32px */
}Comparaison entre em et rem
HTML :
<p class="parent">Parent (20px)
<span class="child-em">Enfant en em (1em)</span>
<span class="child-rem">Enfant en rem (1rem)</span>
</p>CSS :
html {
font-size: 16px; /* Taille de base */
}
.parent {
font-size: 20px;
}Les unités relatives à la fenêtre : vh et vw
vh: hauteur de la fenêtre (1vh = 1 % de la hauteur de l’écran visible).vw: largeur de la fenêtre (1vw = 1 % de la largeur de l’écran visible).
HTML :
<p class="vh-vw">Texte avec vh et vw.</p>CSS :
.vh-vw {
font-size: 10vh; /* Taille correspondant à 10 % de la hauteur de la fenêtre */
}Voilà ce que vous venez d’apprendre
- Les unités absolues :
- Pixels (
px) : une taille fixe qui ne change pas selon l’écran ou le parent.
- Pixels (
- Les unités relatives :
- Pourcentages (
%) : une taille proportionnelle à l’élément parent. em: dépend de la taille de l’élément parent.rem: dépend de la taille de l’élément racine (<html>), idéale pour une mise en page cohérente.vhetvw: basées sur les dimensions de la fenêtre (hauteur et largeur visibles).
- Pourcentages (
- La balise
<span>:- Utilisée pour appliquer un style spécifique à une portion de texte sans créer de nouvelle ligne.
En résumé
- Les unités absolues (comme
px) sont constantes, tandis que les unités relatives (comme%,em, etrem) s’adaptent au contexte. - Les unités relatives sont essentielles pour concevoir des pages responsives qui s’ajustent à différentes tailles d’écran.
- La balise
<span>est un outil simple pour styliser du texte sans structurer la mise en page.
Ces notions sont les bases pour manipuler efficacement la taille des textes et des éléments en CSS. Vous pouvez maintenant les appliquer dans vos projets !