Unités CSS
- Page précédente Mise en page de site CSS
- Page suivante Spécificité CSS
Unités CSS
CSS a plusieurs unités de longueur différentes pour représenter la longueur.
De nombreux attributs CSS acceptent des valeurs de "longueur", comme largeur,marge,padding,font-size etc.
La longueur est un nombre suivi d'une unité de longueur, comme 10px,2em etc.
Exemple
Utilisez px (pixels) pour définir différentes valeurs de longueur :
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
Il ne doit pas y avoir d'espaces entre le nombre et l'unité. Cependant, si la valeur est 0, l'unité peut être omise.
Pour certains attributs CSS, l'utilisation de longueurs négatives est autorisée.
Il y a deux types d'unités de longueur :unité absolueetunité relative.
longueur absolue
Les unités de longueur absolues sont fixes, toute longueur exprimée par une unité absolue sera affichée exactement de cette taille.
Il n'est pas recommandé d'utiliser des unités de longueur absolues sur l'écran, car la taille de l'écran varie beaucoup. Cependant, si le support de sortie est connu, ils peuvent être utilisés, par exemple pour la mise en page d'impression (print layout).
| unité | description | TIY |
|---|---|---|
| cm | centimètre | Essayez |
| mm | millimètre | Essayez |
| in | pouce (1in = 96px = 2,54 cm) | Essayez |
| px * | pixel (1px = 1/96ème de 1 pouce) | Essayez |
| pt | point (1pt = 1/72 de 1 pouce) | Essayez |
| pc | pica (1pc = 12 pt) | Essayez |
* Le pixel (px) est relatif à l'appareil d'observation. Pour les appareils à faible dpi, 1px est un pixel d'appareil (point) sur l'écran. Pour les imprimantes et les écrans à haute résolution, 1px représente plusieurs pixels d'appareil.
longueur relative
L'unité de longueur relative définit la longueur par rapport à une autre propriété de longueur. Les unités de longueur relative s'adaptent mieux au rendu entre différents supports.
| unité | description | TIY |
|---|---|---|
| em | taille de la police (font-size) relativement à l'élément (2em représente deux fois la taille de la police courante) | Essayez |
| ex | x-height relativement à la police courante (très rarement utilisé) | Essayez |
| ch | largeur relativement à "0" (zéro) | Essayez |
| rem | taille de la police (font-size) relativement à l'élément racine | Essayez |
| vw | 1% de la largeur de l'viewport* relativement | Essayez |
| vh | 1% de la hauteur de l'viewport* relativement | Essayez |
| vmin | 1% de la taille de l'viewport* relativement较小 | Essayez |
| vmax | Relativement à la taille plus grande de la vue d'ensemble * 1% | Essayez |
| % | Relativement à l'élément parent | Essayez |
Astuce :Les unités em et rem peuvent être utilisées pour créer des mises en page parfaites et extensibles !
* Vue d'ensemble (Viewport) = dimension de la fenêtre du navigateur. Si la vue d'ensemble est de 50 cm de large, alors 1vw = 0.5 cm.
Prise en charge du navigateur
Les nombres dans le tableau indiquent la version du navigateur qui prend en charge pleinement cette unité de longueur.
| Unités de longueur | |||||
|---|---|---|---|---|---|
| em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
| ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
| rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
| vh, vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
| vmin | 20.0 | 12.0 | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | 16.0 | 19.0 | 7.0 | 20.0 |
- Page précédente Mise en page de site CSS
- Page suivante Spécificité CSS
