Les unités en CSS

Syntaxe pour les unités CSS.

La plupart des valeurs nécessitent que l'unité soit précisée. Ne pas le faire vous fait courir le risque de résultats différents d'un navigateur à l'autre ou même que la valeur ne soit pas traitée. Il n'y a que lorsque la valeur vaut 0 qu'on peut se dispenser d'inscrire l'unité.

L'unité s'inscrit à la suite de la valeur numérique, sans espace :
Exemples : 12px, 45deg, etc.

Unités de dimensions absolues.

Ces unités sont utilisables pour tout ce qui traduit une dimension : largeur et hauteur d'un bloc, marges, taille des caractères, etc.

Ce sont des unités absolues en ce sens que la valeur n'est pas calculée par rapport à une autre dimension.

px Pixel. 1 pixel vaut environ 1/96ème de pouce mais cela peut être variable d'un écran à l'autre.
Sur les mobiles et certains écrans haute définition, un pixel peut correspondre à plusieurs points physiques de écran.
pt Point. 1 point = 1/72ème de pouce.
pc Pica. 1 pica = 1/6ème de pouce, soit 12 picas.
in Pouce.
cm Centimètre.
mm Millimètre.

Unités de dimensions relatives.

Ces unités provoquent un calcul à partir d'une autre dimension. Par exemple, une marge de 25% mesure le quart de la dimension de l'élément.

Les unités relatives sont de plus en plus employées pour créer des mises en page qui s'adaptent à des tailles d'écran de plus en plus diverses (depuis l'écran d'un téléphone mobile jusqu'à l'écran de bureau). Le terme "responsive" désigne une mise en page parfaitement adaptable à la taille de l'écran.

% Pourcentage.
em Unité relative à la taille courante des caractères de l'élément.
2em signifie donc des caractères deux fois plus gros que ceux de la police définie pour l'élément.
rem Unité relative à la taille courante des caractères de la racine.
Définir toutes les tailles de caractères en rem est une bonne solution pour changer dynamiquement la taille des caractères (fonction loupe) car il suffit alors de changer la taille des caractères de l'élément racine.
ch Unité relative à la largeur du caractère zéro (0).
Peu utilisé.
ex Unité relative à la hauteur d'un caractère minuscule.
Peu utilisé.
vw Unité relative à la largeur du viewport(1).
1vw = largeur du viewport / 100.
vh Unité relative à la hauteur du viewport (1).
1vh = hauteur du viewport / 100.
vmin Unité relative à la plus petite dimension du viewport (1).
1vmin = dimension min du viewport / 100.
vmax Unité relative à la plus grande dimension du viewport(1).
1vmax = dimension max du viewport / 100.

(1) Le viewport est une information qui n'existe que sur les appareils mobiles. Il s'agit de la taille écran virtuelle, supérieure à la taille d'écran physique.

Unités d'angles.

Les unités d'angles sont surtout utilisées pour les transformations.
Exemple : transform: rotate(5deg);

deg Degré. 90deg = un angle droit.
rad Radian. 1.57rad = un angle droit (pi / 2).
grad Grade. 100grad = un angle droit.

Unités de résolution.

Ces unités de résolution sont utilisées par les media-queries. Reportez vous à la directive @media pour plus de précisions.

dpi Dot Per Inch ou points par pouce..
dpcm Points par centimètre.
dppx Points par pixel. 1dppx = 96dpi.

Unités de temps.

s Seconde.
ms Milliseconde.

Unités de fréquence.

hz Hertz.
khz Kilo-hertz.