Design numérique

CSS / Unités

Les unités absolues

Pixel (px)

Le pixel est une unité absolue, dont la taille est définie par le fabricant de l'écran. Celle-ci est calculée de manière à ce qu'une ligne épaisse d'1px soit visible à une distance raisonnable suivant la manière dont l'écran est regardé (un téléphone et un écran desktop ne sont pas vus à la même distance). La taille du pixel est également liée à la résolution d'écran choisie par l'utilisateur pour son système. En effet, il est possible d'utiliser une résolution inférieure à la capacité de l'écran, ce qui a pour conséquence d'agrandir la taille effective de rendu d'un pixel. De plus, sur certaines définitions (144px par pouces par exemple), les navigateurs rendent 1px pour 2px par défaut, afin d'améliorer la lisibilité. Ainsi, la résolution native de l'écran et la résolution d'un site regardé avec un navigateur ne seront pas égales (c'est le cas sur mon ordinateur de bureau). Même si la taille du pixel est relative à plusieurs paramètres (capacité de l'écran, réoslution) et différentes selon les appareils utilisés, il s'agit d'une unité dite absolue en CSS car elle est décorélée des dimensions de la fenêtre ou de son parent.

Hello World

Centimètre (cm)

Le centimètre est une unité absolue qui correspond à 1cm physique lors de l'impression. Cette unité doit être seulement utilisée pour le CSS print, car la manière dont elle est rendue à l'écran n'est pas toujours fiable, et surtout elle est indépendante de la résolution, ce qui veut dire que le nombre de pixels rendus sur 1cm est variable (ce qui peut avoir des conséquences néfastes sur le rendu des images par exemple).

Hello World

Millimètre (mm)

Le milimètre est une unité absolue qui corresponde à 1mm physique lors de l'impression. Cette unité doit être seulement utilisée pour le CSS print (mêmes enjeux que le centimètre).

Hello World

Point (pt)

Le point est une unité absolue qui corresponde à 1 point physique lors de l'impression. Cette unité doit être seulement utilisée pour le CSS print (mêmes enjeux que le centimètre).

Hello World

Les unités relatives

Pourcentage (%)

Le pourcentage est une unité relative à la taille du parent. Ainsi, 50% correspondent à 50% de la largeur de du parent. Attention, en hauteur, 100% signifie 100% de la hauteur du parent et non de la fenêtre !

Hello World
Hello World
Hello World

View Width (vw)

Le ViewWidth est une unité relative à la largeur de la fenêtre. Ainsi, 25vw correspondent à 25% de la largeur de la fenêtre, quelque soit l'architecteure HTML. En effet, contrairement au pourcentage, le ViewWidth n'est pas lié au parent.

Hello World

View Height (vh)

Le ViewHeight est une unité relative à la hauteur de la fenêtre. Ainsi, 25vh correspondent à 25% de la hauteur de la fenêtre.

Hello World

Em (em)

Le em est une unité relative à la taille de la font appliquée à l’élément. Ainsi, pour une font-size de 16px, 10em seront égals à 160px, alors que pour une font-size de 32px, 10em seront égals à 320px.

Hello World
Hello World

Rem (rem)

Le Rem est une unité relative à la taille de la font appliqué à la balise html. Cette unité est particulièrement utile pour maintenir un ratio proprotionel dans le calcul des marges.

Hello World