Que signifie em et ex en CSS ?

Version imprimable

11/11/2020, 10h34
Obi Juan Kenobi

Que signifie em et ex en CSS ?

Bonjour à vous tous,

Je viens de reprendre l'initiation au HTML et CSS et actuellement je suis au chapitre du formatage des textes avec la feuille de styles CSS.
Dans la rubrique de la taille des caractères, on peut utiliser les unités de mesures %, cm, mm, px, ex, em, etc.
J'ai fait une recherche sur le web et je ne trouve pas d'explication sur la définition de "em".
Je sais que px = pixels, cm = centimètres, mm = millimètres, etc. mais je ne sais pas ce que signifie em et ex.
Quelqu'un saurait m'expliquer ce que cela signifie ?

Ensuite, j'ai lu que c'est l'unité qu'il faut utiliser le plus souvent notamment à cause du responsive puisqu'elle permettra d'adapter proportionnelle la taille du caractère en fonction du média utilisé mais je ne comprends pas bien ce que cela signifie.
Je sais ce qu'est le responsive (version du site web pour les smartphones et les tablettes) mais je ne comprends pas ce que l'unité de mesure vient faire dans le responsive.

Merci pour votre aide.
11/11/2020, 11h15
mathieu

em et ex sont des unités relatives :
https://fireprawn.developpez.com/tut...ionnement-rem/
11/11/2020, 11h42
Obi Juan Kenobi

Merci pour ce lien qui m'a été utile et j'ai enfin compris que l'utilisation de l'unité em doit se faire en fonction de la taille de la police de caractère définie dans le parent. Ainsi, si pour une taille de police de caractère utilisée à 100 % de sa taille dans une balise <article> et qu'on indique dans une balise <h1>, imbriquée dans <article>, une taille de 3em, cela signifie que le titre de niveau 1 prendra 3 fois la taille de la police de caractère utilisée dans <article>. Et j'ai même appris qu'il vaut mieux utiliser l'unité rem plutôt que em parce qu'elle résout les problèmes de tailles de caractères dans les listes imbriquées <li>, vu qu'elle se base sur la racine de la page web et non sur le parent. On définit ainsi une taille de police de caractère définitive dans la balise <html> et chaque fois qu'on utilisera l'unité de mesure rem dans <body> et ailleurs, les tailles se calculeront en fonction de ce qui a été défini à la racine <html>.

Cependant, je ne sais toujours pas ce que signifie em et ex !
Je sais que rem signifie root em mais que peu bien signifier em ? enfant majeur ? lol
12/11/2020, 18h19
NoSmoking

Bonjour,

Citation:

Et j'ai même appris qu'il vaut mieux utiliser l'unité rem plutôt que em parce qu'elle résout les problèmes de tailles de caractères dans les listes imbriquées <li>, vu qu'elle se base sur la racine de la page web et non sur le parent.

Je ne vois pas trop le rapport mais bon ..!

Citation:

Cependant, je ne sais toujours pas ce que signifie em et ex !
Je sais que rem signifie root em mais que peu bien signifier em ? enfant majeur ? lol

Plutôt qu'un long discours : Em (typography)

Même principe pour ex mais en prenant x comme référence, la « hauteur d'x », hauteur des plus petites lettres de l'alphabet.