Unités CSS
CSS dispose de plusieurs unités différentes pour exprimer des longueurs.
Certaines propriétés CSS de longueur sont width, margin, padding, font-size, border-width, etc.
Une longueur se compose d'un nombre et d'une unité, comme 10px, 2em, etc.
Il ne doit pas y avoir d'espace entre le nombre et l'unité. Si la valeur de longueur est 0, l'unité peut être omise.
Pour certaines propriétés CSS, les longueurs peuvent être négatives.
Il existe deux types d'unités de longueur : relatives et absolues.
Prise en charge des navigateurs
Les nombres dans le tableau ci-dessous indiquent la version minimale du navigateur qui prend en charge cette unité de longueur.
| Unités de longueur | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| 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 | 9.0* | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | Non pris en charge | 19.0 | Non pris en charge | 20.0 |
Remarque :Internet Explorer 9 prend en charge vmin via le nom non standard vm.
Longueur relative
Les unités de longueur relative spécifient une longueur par rapport à une autre propriété de longueur. Les longueurs relatives sont plus adaptées à différents appareils.
| unité | Description | Exemples en ligne |
|---|---|---|
| em | Il décrit la taille de police relative à l'élément actuel auquel elle est appliquée, il s'agit donc aussi d'une unité de longueur relative. Généralement, la taille de police par défaut du navigateur est de 16px, donc 2em == 32px. | Essayez-le vous-même |
| ex | Dépend de la hauteur de la lettre minuscule x de l'alphabet anglais. | Essayez-le vous-même |
| ch | La largeur du chiffre 0 | |
| rem | rem est l'abréviation de root em. Lorsque rem s'applique à un élément non racine, il est relatif à la taille de police de l'élément racine ; lorsque rem s'applique à la taille de police de l'élément racine, il est relatif à sa taille de police initiale. | Essayez-le vous-même |
| vw | Viewport Width, largeur du viewport, 1vw = 1% de la largeur du viewport. | Essayez-le vous-même |
| vh | Viewport Height, hauteur du viewport, 1vh = 1% de la hauteur du viewport. | Essayez-le vous-même |
| vmin | Le plus petit de vw et vh. | Essayez-le vous-même |
| vmax | Le plus grand de vw et vh. | Essayez-le vous-même |
| % |
 |
Astuce :Quelle est la différence entre rem et em ? La différence est que lorsqu'on utilise rem pour définir la taille de police d'un élément, il s'agit toujours d'une taille relative, mais elle est uniquement relative à l'élément racine HTML. |
|---|
Longueur absolue
Les unités de longueur absolue sont des valeurs fixes qui reflètent une taille physique réelle. Les unités de longueur absolue dépendent du support de sortie et ne dépendent pas de l'environnement (écran, résolution, système d'exploitation, etc.).
| unité | Description | Exemples en ligne |
|---|---|---|
| cm | centimètre | Essayez-le vous-même |
| mm | millimètre | Essayez-le vous-même |
| in | Pouces (1in = 96px = 2.54cm) | Essayez-le vous-même |
| px * | Pixels (1px = 1/96e de 1in) | Essayez-le vous-même |
| pt | point, approximativement 1/72 pouce ; (1pt = 1/72in) | Essayez-le vous-même |
| pc | pica, approximativement 12pt, 1/6 de pouce ; (1pc = 12 pt) | Essayez-le vous-même |
Les pixels peuvent être considérés comme les meilleurs « pixels de l'appareil », mais cette longueur en pixels n'a rien à voir avec les pixels d'écran du texte que vous voyez sur un écran. px est en réalité une unité angulaire.
autres extensions