Unités CSS
CSS a plusieurs unités différentes pour exprimer une longueur.
Beaucoup de propriétés CSS prennent "length" des valeurs, telles que la largeur, la marge, padding, font-size, border-width, etc.
Longueur est un nombre suivi d'une unité de longueur, comme 10px, 2em, etc.
Un des espaces ne peut 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, longueurs négatives sont autorisées.
Il existe deux types d'unités de longueur: relative et absolue.
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge totalement l'unité de longueur.
| Unité 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 | 9.0 * | 19,0 | 6.0 | 20,0 |
| vmax | 26,0 | Non supporté | 19,0 | Non supporté | 20,0 |
Note: Internet Explorer 9 supporte vmin avec le nom non-standard: vm.
Longueurs relative
unités de longueur relative spécifient une longueur par rapport à une autre propriété de longueur. unités de longueur relative des échelles mieux entre les différents médiums de rendu.
| Unité | La description |
|---|---|
| em | Par rapport à la taille de police de l'élément (2em means 2 times the size of the current font) Essayez - le |
| ex | Par rapport à la hauteur x de la police courante (rarely used) Essayez |
| ch | Par rapport à la largeur du "0" (zero) |
| rem | Par rapport à la police-taille de l'élément racine |
| vw | Par rapport à 1% de la largeur de la fenêtre * Essayez |
| vh | Par rapport à 1% de la hauteur de la fenêtre * Essayez |
| vmin | Par rapport à 1% du viewport de * plus petite dimension Essayez - le |
| vmax | Par rapport à 1% du viewport de * plus grande dimension Essayez - le |
| % |
Tip: L'em et rem unités sont pratiques dans la création de plan parfaitement évolutive!
* Viewport = la taille de la fenêtre du navigateur. Si la fenêtre est 50cm de large, 1vw = 0.5cm.
Absolute Longueurs
Les unités de longueur absolues sont fixes et une longueur exprimée en l'une de ces apparaîtra comme exactement cette taille.
unités de longueur absolues ne sont pas recommandés pour une utilisation à l'écran, parce que la taille de l'écran varient tellement. Cependant, ils peuvent être utilisés si le support de sortie est connu, par exemple pour l'impression mise en page.
| Unité | La description |
|---|---|
| cm | centimètres Essayez - le |
| mm | millimètres Essayez - le |
| in | pouces (1in = 96px = 2.54cm) Essayez |
| px * | pixels (1px = 1/96th of 1in) Essayez |
| pt | les points (1pt = 1/72 of 1in) Essayez |
| pc | picas (1pc = 12 pt) Essayez |
* Pixels (px) sont liés au dispositif de visualisation. Pour les appareils à bas dpi, 1px est un pixel de l' appareil (dot) de l'écran. Pour les imprimantes et les écrans haute résolution 1px implique plusieurs pixels de l'appareil.