CSS Unités
Unités CSS
CSS propose plusieurs unités différentes pour exprimer une longueur.
De nombreuses propriétés CSS acceptent des valeurs de "longueur", telles que width , margin , padding , font-size , etc.
La valeur de longueur est un nombre suivi d'une unité de longueur, comme px , em , rem , etc.
CSS dispose de deux types d'unités de longueur :
- Unités absolues
- Unités relatives
Unités Absolues CSS
Les unités absolues sont fixes, et la longueur exprimée dans l'une d'elles apparaîtra exactement de cette taille.
Les unités absolues ne changent pas lorsque la taille de l'écran varie, et ne sont pas recommandées pour les sites web. Cependant, elles peuvent être utilisées si le support de sortie est connu, comme pour la mise en page imprimée.
L'unité absolue la plus couramment utilisée est px (pixels).
| Unité | Description |
|---|---|
| px | pixels (1px = 1/96 de 1in) |
| cm | centimètres |
| mm | millimètres |
| in | pouces (1in = 96px = 2.54cm) |
| pt | points (1pt = 1/72 de 1in) |
| pc | picas (1pc = 12 pt) |
Définir la Taille de la Police Avec Px
Définir la taille du texte avec px (pixels) vous donne un contrôle total sur la taille du texte.
Si vous utilisez des pixels, la page web peut ne pas s'adapter très bien à différentes tailles d'écran, et les utilisateurs ne peuvent pas ajuster la taille du texte dans les paramètres de leur navigateur. Cependant, ils peuvent toujours utiliser l'outil de zoom pour redimensionner l'ensemble de la page.
Exemple
Définir les tailles de police avec px :
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 16px;
}
Remarque : Un espace ne peut pas apparaître entre le nombre et l'unité. Cependant, si la valeur est 0 , l'unité peut être omise.
Unités Relatives CSS
Les unités relatives spécifient une longueur par rapport à une autre longueur (comme l'élément parent, l'élément racine ou la fenêtre d'affichage).
Les unités de longueur relatives s'adaptent mieux entre différentes tailles d'écran.
| Unité | Description | |
|---|---|---|
| em | Relatif à la taille de police de l'élément parent | |
| ex | Relatif à la hauteur x de la police actuelle (rarement utilisé) | |
| ch | Relatif à la largeur du "0" (zéro) | |
| fr | Une unité fractionnaire. 1fr équivaut à 1 part de l'espace disponible | |
| rem | Relatif à la taille de police de l'élément racine HTML | |
| vw | Relatif à 1% de la largeur de la fenêtre d'affichage*. 100vw = pleine largeur de la fenêtre d'affichage | |
| vh | Relatif à 1% de la hauteur de la fenêtre d'affichage*. 100vh = pleine hauteur de la fenêtre d'affichage | |
| vmin | Relatif à 1% de la plus petite dimension de la fenêtre d'affichage* | |
| vmax | Relatif à 1% de la plus grande dimension de la fenêtre d'affichage* | |
| % | Relatif à la taille de l'élément parent |
* Fenêtre d'affichage = la taille de la fenêtre du navigateur. 1vw = 1% de la largeur actuelle de la fenêtre d'affichage du navigateur. Donc, si la fenêtre d'affichage fait 500px de large, 1vw équivaut à 5px.
Astuce : Les unités em et rem sont idéales pour créer des sites web évolutifs et réactifs !
Définir la Taille de la Police Avec Em
L'unité em est relative à la taille de police de l'élément parent. Ainsi, si l'élément parent a une taille de police de 16px, alors 2.5em donnerait 40px.
Dans l'exemple suivant, la taille du texte en em est la même que dans l'exemple précédent en pixels. Cependant, l'unité em permet à l'utilisateur d'ajuster la taille du texte dans les paramètres du navigateur.
Exemple
Définir les tailles de police avec em :
body {
font-size: 16px; /* Taille de police de base */
}
h1 {
font-size: 2.5em; /* 2.5 * 16 = 40px */
}
h2 {
font-size: 1.875em; /* 1.875 * 16 = 30px */
}
p {
font-size: 1em; /* 1 * 16 = 16px */
} Définir la Taille de la Police Avec Rem
L'unité rem est relative à la taille de police de l'élément racine HTML (<html>).
Contrairement à em , qui est relative à la taille de police de son élément parent, rem fait toujours référence à la taille de police de l'élément <html> , quelle que soit sa position dans l'arbre du document. Cela rend rem très utile pour créer des designs évolutifs et réactifs. En changeant la taille de police de l'élément <html> , tous les éléments dimensionnés avec des unités rem s'adapteront proportionnellement sur toute la page.
La taille de police par défaut de l'élément <html> dans la plupart des navigateurs est de 16px. Donc, par défaut, 1rem équivaut à 16px, sauf si cela est explicitement remplacé dans le CSS.
Exemple
Définir les tailles de police avec rem :
html {
font-size: 16px; /* Définir la taille de police racine */
}
h1 {
font-size: 2.5rem; /* 2.5 * 16 = 40px */
}
h2 {
font-size: 1.875rem; /* 1.875 * 16 = 30px */
}
p {
font-size: 1rem; /* 1 * 16 = 16px */
}