Unité de mesure
Type d'unités
Il existe 2 sortent d'unités de mesures en CSS, soit les unités de mesures absolues et les unités de mesures relative. Nous utiliserons ces unités de mesures majoritairement dans les propriétés CSS permettant de modifier la taille ou l'espacement des éléments HTML. Si la page suivante ne satisfait pas votre curiosité sur les unités possible en CSS, vous pouvez trouver plus d'information sur la page web suivante:
Unités relatives
Une unité de mesure relative est toujours dépendante d'une autre mesure. C'est généralement le type d'unités de mesures que nous utiliserons dans nos pages Web. Il existe de nombreuses unitées de mesures relatives et elles ne sont pas toutes relatives aux mêmes choses. Voici donc une liste de ces unités de mesure ainsi que de ce qu'elle dépende.
| Unité | Définition | Utilisation |
|---|---|---|
| em | Mesure relative en fonction de la taille courante de la police de caractères. 1em est donc plus grand sur un titre que sur paragraphe par défaut. | Utile pour la taille du texte. |
| rem | Mesure relative en fonction de la taille de base de la police de caractères. En général, 1em est équivalent à 16px. | Utile pour les margins, padding, les grosses bordures, les dimensions d'un élément ou la taille du texte. |
| % | Mesure relative en fonction de la valeur du parent. 50% indique la moitié de la valeur de la propriété du parent. | Utile pour les les dimensions d'un élément. |
| vw | Mesure relative en fonction de la largeur du navigateur. C'est un pourcentage, donc 25vw indique 25% de la largeur du navigateur. | Utile pour la largeur d'un élément. |
| vh | Mesure relative en fonction de la hauteur du navigateur. C'est un pourcentage, donc 75vh indique 75% de la hauteur du navigateur. | Utile pour la hauteur d'un élément. |
Unités absolue
Une unité de mesures absolue ne dépend de rien. Elle spécifie une taille très spécifique à l'écran. Bien que nous les utilisions de temps en temps, il n'est pas vraiment recommander de les utiliser puisque aujourd'hui, les tailles d'écrans varient beaucoup. En effet, si vous utilisez une taille absolue sur un écran d'ordinateur ou sur un téléphone cellulaire, une marge de 30 pixels peut être très différente. Voici tout de même quelques unités de mesures absolues:
| Unité | Définition | Utilisation |
|---|---|---|
| px | Mesure en pixel | Utile pour les fines bordures ou toute valeur inférieure à 5px. |
| mm | Mesure en millimètre | Utilisé pour l'impression de page web sur papier. |
| cm | Mesure en centimètre | Utilisé pour l'impression de page web sur papier. |
| in | Mesure en pouces | Utilisé pour l'impression de page web sur papier. |
| pt | Mesure en points | Utilisé pour l'impression de page web sur papier. |
Unités les plus fréquente
Bien qu'il y ait de nombreuses unités de mesures, nous utiliseront généralement toujours les quelques mêmes. Certaines unités de mesure seront pratiquement jamais utilisé. C'est le cas du mm, cm, in et pt puisqu'ils sont majoritairement utilisé pour l'impression. Parmi les autres, on utilisera majoritairement le px et le rem. Pour les très petites valeurs, on utilise le px. Autrement, on préfèrera le rem.
Les autres unités de mesure vont voir leur apparition dans quelques techniques de CSS, mais ne sont pas si fréquente.