Navigation

Toutes les catégories

Voir les derniers articles

CSS : le guide pour choisir la bonne unité de mesure

Dans un fichier CSS, de nombreuses propriétés cohabitent : des typographies, des couleurs, des valeurs numériques, etc. Certaines d’entre elles ont...

Publié par Charlotte Chollat

Dans un fichier CSS, de nombreuses propriétés cohabitent : des typographies, des couleurs, des valeurs numériques, etc. Certaines d’entre elles ont besoin d’être associées à une unité et ce choix est loin d’être anodin.

Il existe plusieurs types d’unité, et chacun influence à sa manière le design de votre site. Si vous ne savez pas comment choisir entre le “px”, le “em”, ou encore le “vw”, alors vous tombez bien. Nous allons faire un point sur les unités de mesure en CSS pour que vous puissiez les utiliser correctement.

Les unités absolues

Il existe des unités en CSS qui ne sont influencées par aucune autre dimension. Appelées unités absolues, elles sont généralement utilisées pour traduire une longueur, par exemple un padding, une hauteur de bloc, la taille des caractères, etc.

Les unités absolues sont les suivantes :

  • Les pixels (px)
  • Les pouces (in)
  • Les centimètres (cm)
  • Les millimètres (mm)
  • Les picas (pc)
  • Les points (pt)

La plupart du temps, vous n’utiliserez que le pixel ou le point, mais il est bon de comprendre la relation entre ces unités de mesure.

Retenez donc que 1 in = 96 px, 1 cm = 37,8 px et 1 mm = 3,78 px.

Pour illustrer les unités absolues, prenons un exemple concret. Admettons le code CSS suivant :

.box {
width : 150px ;
height : 150 px ;
}

Cela signifie que l’élément box aura la même dimension (150 x 150 pixels), quelle que soit la taille de l’écran.

Les unités relatives au texte

À l’opposé des unités absolues, il existe des unités qui font varier la taille d’un élément en fonction de la taille de la police ou de l’élément parent.

Ces unités dites relatives au texte sont de plus en plus utilisées pour harmoniser les éléments d’un design. On retrouve :

  • Em : elle est proportionnelle à la taille de la police de l’élément parent ou du document. Par défaut, 1 em = 16 px si aucune taille de police n’est définie.
  • Rem : l’unité rem fait toujours référence à la taille de la police de l’élément racine. En d’autres termes, elle dépend du font-size définit par défaut.
  • Ex : très rarement utilisée, cette unité est relative à la hauteur de la police actuelle en minuscule.
  • Ch : cette unité est elle aussi peu utilisée, elle est relative à la largeur du caractère “0”.

Parmi ces unités relatives au texte, vous serez amené à utiliser le em. Cette unité de mesure permet de garder un texte lisible. Autre avantage, si vous souhaitez modifier la taille de votre police d’écriture, vos éléments enfants s’ajusteront automatiquement.

Les unités relatives au viewport

D’autres unités permettent aux éléments de s’adapter à la taille du viewport, c’est-à-dire à la taille de la fenêtre du navigateur.

Ces unités relatives au viewport sont essentielles pour mettre en place un design responsive, et on retrouve :

  • La hauteur du viewport (vh)
  • La largeur du viewport (vw)
  • Le viewport minimum (vmin)
  • Le viewport maximum (vmax)

Les unités vh et vw

Les unités vh et vw sont similaires, à la seule différence qu’elles dépendent respectivement de la hauteur et de la largeur de la fenêtre de navigation.

Retenez que 1 vh = 1 % de la hauteur du viewport et que 1 vw = 1 % de la largeur du viewport.

L’unité de mesure vh est généralement utilisée pour permettre à un élément de s’adapter à la hauteur totale de la fenêtre :

.box {
height :100vh ;
background : red ;
}

Dans cet exemple ci-dessus, l’élément box a une hauteur de 100 % par rapport à la hauteur de la fenêtre de navigation.

Prenons un autre exemple :

h1{
font-size : 6 vw ;
}

Ici la taille du titre H1 correspond à 6 % de la largeur de la fenêtre. Par conséquent, si cette dernière est de 1000 px, la taille de la police sera de 60 px.

Les unités vmin et vmax

Ces deux unités de mesure en CSS fonctionnent selon le même principe.

Avec le vmin, c’est la dimension minimale du viewport qui est prise en compte. Par exemple, si ce dernier est de 1000 px de haut par 800 px de large, les éléments ayant une unité vmin s’adapteront en fonction de la largeur de la fenêtre.

Avec le vmax, les éléments s’adaptent en fonction de la dimension maximale du viewport. Selon l’exemple précédent, 1 vmax = 10 px.

Les unités en pourcentage

Le pourcentage fait partie des unités relatives de façon générale puisqu’il s’adapte en fonction de son élément parent.

La plupart du temps, cette unité est utilisée pour définir la hauteur et la largeur d’un élément. Vous la retrouverez notamment dans le framework Bootstrap.

Lire la suite de l'article
Afficher les commentaires (0)

Commentaires

Newsletter WebActus

Abonnez-vous pour recevoir notre sélection des meilleurs articles directement dans votre boîte mail.

Nous ne partagerons pas votre adresse e-mail.

Articles similaires

Graphisme

Web Design : 6 éléments à ne pas oublier sur votre site

Lorsque vous menez un projet de conception web, de nombreux éléments doivent être pris en compte puisque les clients veulent généralement...

Publié le par Jerome Dajoux
Graphisme

Impression : comment utiliser les marges et fonds perdus ?

Dès lors qu’un graphiste conçoit des supports destinés à l’impression, l’ultime étape de son travail va être de...

Publié le par Jerome Dajoux