Unités CSS
Unités CSS
CSS a plusieurs unités différentes pour exprimer une longueur.
De nombreuses propriétés CSS prennent des valeurs de "longueur", telles que width, margin, padding,
font-size, etc.
La longueur est un nombre suivi d'une unité de longueur, telle que 10px,
2em, etc.
Exemple
Définissez différentes valeurs de longueur, en utilisant px (pixels) :
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
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.
Pour certaines propriétés CSS, les longueurs négatives sont autorisées.
Il existe deux types d'unités de longueur : absolue et relative .
Longueurs absolues
Les unités de longueur absolue sont fixes et une longueur exprimée dans l'une d'entre elles apparaîtra exactement comme cette taille.
Les unités de longueur absolue ne sont pas recommandées pour une utilisation à l'écran, car les tailles d'écran varient énormément. Cependant, ils peuvent être utilisés si le support de sortie est connu, comme pour la mise en page d'impression.
| Unit | Description |
|---|---|
| cm | centimeters |
| mm | millimeters |
| in | inches (1in = 96px = 2.54cm) |
| px * | pixels (1px = 1/96th of 1in) |
| pt | points (1pt = 1/72 of 1in) |
| pc | picas (1pc = 12 pt) |
* Les pixels (px) sont relatifs à l'appareil de visualisation. Pour les appareils à faible résolution, 1px correspond à un pixel (point) de l'appareil de l'affichage. Pour les imprimantes et les écrans haute résolution, 1px implique plusieurs pixels de périphérique.
Longueurs relatives
Les unités de longueur relative spécifient une longueur relative à une autre propriété de longueur. Les unités de longueur relative évoluent mieux entre différents supports de rendu.
| Unit | Description | |
|---|---|---|
| em | Relative to the font-size of the element (2em means 2 times the size of the current font) | |
| ex | Relative to the x-height of the current font (rarely used) | |
| ch | Relative to the width of the "0" (zero) | |
| rem | Relative to font-size of the root element | |
| vw | Relative to 1% of the width of the viewport* | |
| vh | Relative to 1% of the height of the viewport* | |
| vmin | Relative to 1% of viewport's* smaller dimension | |
| vmax | Relative to 1% of viewport's* larger dimension | |
| % | Relative to the parent element |
Astuce : Les unités em et rem sont pratiques pour créer une mise en page parfaitement évolutive !
* Viewport = la taille de la fenêtre du navigateur. Si la fenêtre a une largeur de 50 cm, 1vw = 0,5 cm.
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge l'unité de longueur.
| Length Unit | |||||
|---|---|---|---|---|---|
| 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 |