Unités de mesure en CSS

Les unités de mesure en CSS sont essentielles pour définir la taille et la proportion des éléments sur une page Web. Plusieurs unités de mesure peuvent être utilisées, chacune avec ses particularités et ses applications spécifiques.

Unités de mesure absolues

Les unités de mesure absolues sont fixes et ne changent pas en fonction de la taille de l'écran ou de l'appareil utilisé pour accéder à la page. Parmi les unités de mesure absolues les plus courantes, citons :

• px : est l'unité de mesure la plus couramment utilisée en CSS. Chaque pixel représente un point sur l'écran et est une mesure absolue, c'est-à-dire qu'il ne change pas en fonction de la taille de l'écran ou de l'appareil ;
• fr : est une unité de mesure utilisée principalement pour l'impression. Chaque point représente 1/72 de pouce ;
• in : est une unité de mesure qui représente un pouce. Il est rarement utilisé dans la conception Web, mais peut être utile dans les projets d'impression.

Unités de mesure relatives

Les unités de mesure relatives sont proportionnelles à la taille du canevas ou de l'élément parent. Cela signifie qu'ils s'adaptent à différentes résolutions et tailles d'écran, ce qui rend la page plus réactive et adaptable. Parmi les unités de mesure relatives les plus courantes, citons :

• % : représente le pourcentage de la taille de l'élément parent. Par exemple, si un élément parent a une largeur de 500 px et qu'un élément enfant a une largeur de 50 %, il aura une largeur de 250 px ;
• em : est une unité de mesure basée sur la taille de la police de l'élément parent. Par exemple, si la taille de police de l'élément parent est de 16px et qu'un enfant a la taille de police : 1em, il aura une taille de police de 16px ;
• rem : est une unité de mesure basée sur la taille de la police de l'élément racine (généralement l'élément html). Par exemple, si la taille de police de l'élément racine est de 16px et qu'un enfant a font-size: 1rem, il aura une font-size de 16px ;
• vw et vh : représentent le pourcentage de la largeur (vw) ou de la hauteur (vh) de l'écran. Par exemple, si la largeur de l'écran est de 1 000 pixels et qu'un élément a une largeur : 50 vw, il aura une largeur de 500 px.

Il est important de comprendre les différences entre les unités de mesure absolues et relatives et de choisir celle qui correspond le mieux aux besoins de votre projet. En outre, il est important de se rappeler que l'utilisation excessive d'unités de mesure absolues peut rendre la page moins réactive et adaptative, tandis que l'utilisation excessive d'unités de mesure relatives peut rendre la page saccadée et imprévisible.

Page suivante de lebook gratuit :

6Modèle de boîte en CSS

3 minutes