Les tailles d'éléments en CSS
-
PX (pixel) : permet d'obtenir un résultat statique,
absolu et indépendant du navigateur.
-
REM : permet d'obtenir un résultat dynamique, relatif à
la valeur par défaut du navigateur.
Cette valeur est de 16px, mais elle peut être modifiée dans l'élément
parent.
-
EM ou % : permet d'obtenir un résultat dynamique,
équivalent à un facteur de la taille de fonte appliquée à l'élément
parent.
Si cette taille n'a pas été définie pour l'élément parent, elle
correspondra à 16px (valeur par défaut du navigateur).
-
VH : permet d'obtenir un résultat responsive,
proportionnel à la hauteur de l'écran.
-
VW : permet d'obtenir un résultat responsive,
proportionnel à la largeur de l'écran.
-
VMIN : permet d'obtenir un résultat responsive,
proportionnel à la dimension la plus courte (hauteur ou largeur) de
l'écran
Rendre son texte responsive
La propriété clamp permet de définir des tailles
variables
Syntaxe : {font-size: clamp(35px, 5vw, 70px)}
- 35px est la taille mini
- 70px est la taille maxi
- 5vw (viewport) est la taille responsive intermédiaire