Les unités

px

Valeur la plus commune et connue le pixel : 1px = 1px de ton écran. Cette valeur est très rigide en web, 800px équivaudra toujours à 800px. Il sera plus difficile de faire un site web adapté au mobile en utilisant cette unité là.

em

Mesure qui est proportionnelle à la taille de la police présente dans le bloc correspondant à la déclaration du style. Pour illustrer ce cas :

  • si j'ai mon h1 qui a une taille de police définie à 54px : 1em = 54px
  • si j'ai mon h3 qui a une taille de police définie à 32px : 1em = 32px
h1 {
    font-size: 54px;
    margin-bottom: 1em; /* équivaut à 54px*/
}

h3 {
    font-size: 32px;
    margin-bottom: 1em; /* équivaut à 32px*/
}

Mon unité em va donc s'adapter à la taille de police définie dans mon élément.

%

En utilisent des valeurs en pourcentages, on défini la taille en fonction de la taille de l'élément parent.

Ci-dessous, nous avons deux bloc avec les mêmes propriétés, soit une largeur de la moitié du parent : width: 50%; Voici le code pour la mise en forme : 

darkgrey {
    width: 100%;
}

lightgrey {
     width: 80%;
}

coral {
    width: 30%;
}

blue {
    width: 50%;
}

green {
    width: 50%;
}

On constate ci-dessus que le bloc bleu et vert ont exactement la même donnée soit width: 50%; cependant ils ne font pas la même largeur. Pourquoi ?

  • Le bloc bleu va prendre le 50% de son parent directe, soit le 50% du bloc gris foncé.
  • Le bloc vert quant à lui va prendre le 50% de son parent directe, soit le 50% du bloc bleu.

unite-css-percentage

vw, vh

  • vw = Viewport Width
  • vh = Viewport Height

Cette valeur ce calcule donc par rapport au viewport, soit le taille de la fenêtre. 

div {
    width: 50vw; /* mon bloc prendra le 50% de la largeur de ma fenêtre */
    height: 70vh; /* mon bloc prendra le 50% de la hauteur de ma fenêtre */
}

css-vw-units css-vh-units

calc()

Grâce à calc(), il est possible de réaliser des calculs pour déterminer la valeur d'une propriété CSS. Vous pouvez utiliser tous les différents opérateurs suivants, addition +, soustraction -, division /, multiplication *. C'est très utile lorsque vous souhaitez avoir des éléments qui font le tiers du parent soit : 

div {
    width: calc(100% / 3); /* chacun de mes éléments div prendra alors 33.3% de la largeur disponible */
}

C'est aussi utile lorsque vous souhaitez que votre élément prenne le 100% de la largeur moins la largeur de vos marges, soit : 

div {
    width: calc(100% - 40px); /* mon élément prendra alors le 100% en y soustrayant les 40px de marge ou de padding de mon parent */
}

clamp()

La valeur clamp() va nous permettre de définir simplement une valeur mininum, une valeur par default et une valeur maximum.

div {
    /* width: clamp(min, default, max); */
    width: clamp(250px, 20vw, 700px);    

    /* c'est comme si on disait : */
    min-width: 250px;
    width: 20vw;
    max-width: 700px;
}

C'est aussi utile pour créer une font dynamique qui va s'adapter à la taille de l'écran 

div {
    font-size: clamp(18px, 6vw, 72px); /* ma typo ne sera donc jamais plus petite que 18px, jamais plus grande que 72px et entre deux elle va s'adapter avec la taille de l'écran */
}

Table of Contents