28212 sujets

CSS et mise en forme, CSS3

Différence entre les unités "em" et "rem"

Bonjour à vous tous,

Je suis tombé sur une image qui explique clairement la différence entre les unités "em" et "rem", que je partage avec vous. Peut être que parmi vous certains ne sont pas familiers avec ces deux unités très utilisées et se demandent quand utiliser l'une ou l'autre. Ce schéma, trouvée sur Pinterest, est fait pour vous.

upload/1744727577-62242-2639a956b251dd440dbe523ee9f4e.jpg
Pour résumer, les unités "em" sont relatives à l'élément parent tandis que les unités "rem" sont relatives à la balise racine <html>.

Bonne fin de journée et
que le code soit avec vous !
Modifié par ObiJuanKenobi (15 Apr 2025 - 16:39)
Salut,

Moi j'ai commencé avec les rem, car plus simple à gérer. Mais une fois aguerri je me suis mis aux em. L'intéret ? : la possibilité de "zoomer", de rapetisser ou grossir un composant de manière individuelle.

Par exemple, pour certains frameworks CSS il faut des classes telles que .btn-lg pour un gros bouton, .btn-sm pour un petit bouton, etc (coucou Bootstrap), système pour lequel il faut prévoir toutes les tailles, et qui plus est pour chaque composant, donc un système contraignant avec un choix de tailles forcément très limitée (en général trois tailles). Chez moi il suffit d'ajouter une classe pour le composant cible et on choisit le grossissement, par exemple de 50% à 400%.

Exemple en ligne : Scales.

J'ai créé ça il y a quelques années. Par la suite je me suis contenté de peaufiner le système avec des custom properties configurables inline.

Du coup, lorsque je crée un composant, je pense toujours à sa scalabilité potentielle, et donc mes composants doivent tous passer ce test.
Modifié par Olivier C (18 Apr 2025 - 14:46)
Prévenir un modérateur
Répondre au sujet
Aller à