Vous avez peut-être accepté l’utilisation d’unités de mesure flexibles, mais vous ne comprenez peut-être pas encore complètement quand utiliser rem et quand utiliser em. Ce tutoriel vous aidera à le comprendre!

Les unités em et rem sont des unités flexibles et évolutives qui sont traduites par le navigateur en valeurs de pixels, en fonction des paramètres de taille de police de votre conception. Si vous utilisez une valeur de 1em ou 1rem, cela peut se traduire dans le navigateur par n’importe quoi de 16px160px ou toute autre valeur.

On the other hand px values are used by the le navigateur tel quel, donc 1px s’affichera toujours exactement comme 1px.

Essayez le curseur sur cet exemple de CodePen pour voir comment la valeur des unités rem et em peut se traduire en différentes valeurs de pixels, tout en définissant explicitement les unités px restent de taille fixe:

La Grande Question

L’utilisation des unités em et rem nous donne une flexibilité dans nos conceptions et la possibilité d’adapter les éléments de haut en bas, au lieu d’être bloqués avec des tailles fixes. Nous pouvons utiliser cette flexibilité pour rendre nos conceptions plus faciles à ajuster pendant le développement, plus réactives et pour permettre aux utilisateurs de navigateurs de contrôler l’échelle globale des sites pour une lisibilité maximale.

Les unités em et rem offrent cette flexibilité et fonctionnent de manière similaire, la grande question est donc de savoir quand utiliser les valeurs em et quand utiliser les valeurs rem ?

Différence cruciale

La différence entre les unités em et rem est la façon dont le navigateur détermine la valeur px en laquelle elles se traduisent. Comprendre cette différence est la clé pour déterminer quand utiliser chaque unité.

Nous allons commencer par examiner comment les unités rem et em fonctionnent à partir de zéro pour vous assurer de connaître chaque détail. Ensuite, nous allons passer à la raison pour laquelle vous devriez utiliser des unités em ou rem.

Enfin, nous examinerons l’application pratique des éléments d’une conception typique sur lesquels vous devez utiliser chaque type d’unité.

Comment les unités rem se traduisent en valeurs de pixels

Lorsque vous utilisez des unités rem, la taille des pixels en lesquels elles se traduisent dépend de la taille de la police de l’élément racine de la page, c’est-à-dire l’élément html. Cette taille de police racine est multipliée par le nombre que vous utilisez avec votre unité rem.

Par exemple, avec une taille de police d’élément racine de 16px10rem équivaudrait à 160px, c’est-à-dire 10 x 16 = 160.

Comment les unités em se traduisent en valeurs de pixels

Lorsque vous utilisez des unités em, la valeur de pixel que vous obtenez est une multiplication de la taille de la police sur l’élément à styler .

For example, if a div has a font size of 18px10em would equate to 180px, i.e. 10 x 18 = 180.

Important to Know:

C’est une idée fausse assez répandue que les unités em sont relatives à la taille de la police de l’élément parent. En fait, selon la spécification W3, ils sont relatifs à la taille de la police « de l’élément sur lequel ils sont utilisés”.

Les tailles de police des éléments parents peuvent affecter les valeurs em, mais lorsque cela se produit, c’est uniquement à cause de l’héritage. Regardons pourquoi, et voyons comment cela fonctionne en action.

L’effet de l’héritage sur les unités em

Travailler avec des unités empeut commencer à devenir délicat en matière d’héritage, car chaque élément hérite automatiquement de la taille de la police de son parent. L’effet de l’héritage ne peut être remplacé qu’en définissant explicitement une taille de police avec une unité non soumise à l’héritage, telle que px ou vw.

La taille de la police de l’élément sur lequel les unités em sont utilisées détermine leur taille. Mais cet élément peut avoir hérité d’une taille de police de son parent, qui a hérité d’une taille de police de son parent, et ainsi de suite. En tant que tel, il est possible que n’importe quelle valeur em soit affectée par la taille de la police de l’un de ses parents.

Regardons un exemple. N’hésitez pas à essayer cela dans CodePen par vous-même au fur et à mesure que nous le traversons. Au fur et à mesure, utilisez les outils de développement Chrome ou Firebug pour Firefox pour inspecter les valeurs de pixels dans lesquelles nos unités em sont calculées.

Exemple d’héritage em

Si nous avons une page avec une taille de police racine de 16px (généralement la valeur par défaut) et une div enfant à l’intérieur avec un remplissage de 1.5em, cette div héritera de la taille de police de 16px de l’élément racine. Par conséquent, son remplissage se traduira par 24px, c’est-à-dire 1,5 x 16 = 24.

Alors que se passe-t-il si nous enroulons une autre div autour de la première et définissons son font-size sur 1.25em?

Notre div wrapper hérite de la taille de la police racine de 16px et la multiplie par son propre paramètre font-size de 1.25em. Cela définit la div pour avoir une taille de police de 20px, c’est-à-dire 1,25 x 16 = 20.

Maintenant, notre div d’origine n’hérite plus directement de l’élément racine, mais hérite d’une taille de police de 20px de sa nouvelle div parente. Sa valeur de remplissage de 1.5em équivaut maintenant à 30px, c’est-à-dire 1,5 x 20 = 30.

Cet effet de mise à l’échelle peut être encore aggravé si nous ajoutons une taille de police basée sur em à notre div d’origine, disons 1.2em.

La div hérite de la taille de police 20px de son parent, puis la multiplie par son propre paramètre 1.2em, ce qui lui donne une nouvelle taille de police de 24px, soit 1,2 x 20 =24.

Le remplissage 1.5em sur notre div changera maintenant de taille avec la nouvelle taille de police, cette fois en 36px, c’est-à-dire 1,5 x 24 = 36.

Enfin, pour illustrer davantage que les unités em sont relatives à la taille de police de l’élément sur lequel elles sont utilisées (pas l’élément parent), voyons ce qui arrive à notre remplissage de 1.5em si nous définissons explicitement la div pour utiliser une taille de police de 14px, une valeur sujet à héritage.

Maintenant, notre rembourrage est tombé à 21px, soit 1,5 x 14 = 21. Il n’est pas affecté par la taille de la police de l’élément parent.

Avec tout ce potentiel de complication, vous pouvez voir pourquoi il est important de savoir comment utiliser les unités em de manière gérable.

L’effet des Paramètres du navigateur sur la taille de la police de l’élément HTML

Par défaut, les navigateurs ont généralement une taille de police de 16 pixels, mais celle-ci peut être modifiée de 9 pixels à 72 pixels par l’utilisateur.

Important à savoir:

L’élément racine html hérite de sa taille de police des paramètres du navigateur, à moins qu’il ne soit remplacé par une valeur fixe explicitement définie.

Ainsi, alors que la taille de la police sur l’élément html détermine directement les valeurs rem, cette taille de police peut provenir des paramètres du navigateur.

Ainsi, les paramètres de taille de police du navigateur peuvent affecter la valeur de chaque unité rem utilisée dans un design, ainsi que de chaque unité em via l’héritage.

Effet de réglage du navigateur Lorsqu’aucune Taille de police HTML n’est définie

À moins d’être remplacée, l’élément html héritera de la taille de police par défaut dans le navigateur. Par exemple, prenons un site où aucune propriété font-size n’est définie sur l’élément html.

Si un utilisateur a son navigateur à la taille de police par défaut de 16px, la taille de police racine sera de 16px. Dans les Outils de développement Chrome, vous pouvez voir ce qu’un élément a hérité en cochant Afficher les propriétés héritées sous l’onglet Calculé.

Dans ce cas 10rem équivaut à 160px, c’est-à-dire 10 x 16 = 160.

Si l’utilisateur augmente la taille de la police de son navigateur jusqu’à 18 pixels, la taille de la police racine devient 18 pixels. Maintenant, 10rem se traduit par 180px, c’est-à-dire 10 x 18 = 180.

Effet de réglage du navigateur avec la taille de la police HTML de l’unité EM

Lorsqu’une em la taille de la police basée sur la html élément, la valeur de pixel qu’il traduit sera un multiple du paramètre de taille de police du navigateur.

Par exemple, si l’élément html du site avait une propriété font-size définie sur 1.25em, la taille de la police racine serait 1,25 fois la taille de la police du navigateur.

Si la taille de la police du navigateur était définie sur 16px, la taille de la police racine serait 20px, c’est-à-dire 1,25 x 16 =20.

Dans ce cas 10rem serait égal à 200px, c’est-à-dire 10 x 20 = 200.

Cependant, si la taille de la police du navigateur était définie sur 20px, la taille de la police racine se traduirait plutôt par 25px, c’est-à-dire 1,25 x 20 = 25.

Maintenant 10rem serait égal à 250px, c’est-à-dire 10 x 25 = 250.

Résumant la différence entre em et rem

Tout ce qui précède se résume à ceci:

• Traduction de rem la valeur des unités en pixels est déterminée par la taille de la police de l’élément html. Cette taille de police est influencée par l’héritage du paramètre de taille de police du navigateur, à moins qu’il ne soit explicitement remplacé par une unité non soumise à l’héritage.

• La traduction des unités em en valeurs de pixels est déterminée par la taille de la police de l’élément sur lequel elles sont utilisées. Cette taille de police est influencée par l’héritage des éléments parents, sauf si elle est explicitement remplacée par une unité non soumise à l’héritage.

Pourquoi utiliser des unités rem:

La plus grande puissance offerte par les unités rem n’est pas seulement qu’elles donnent un dimensionnement cohérent indépendamment de l’héritage de l’élément. C’est plutôt qu’ils nous donnent un moyen de faire en sorte que les paramètres de taille de police utilisateur influencent chaque aspect de la mise en page d’un site en utilisant des unités rem où nous utilisions des unités px.

Pour cette raison, le but principal de l’utilisation des unités rem devrait être de s’assurer que quelle que soit la taille de police par défaut sur laquelle un utilisateur a défini son navigateur, la mise en page s’ajustera pour s’adapter à la taille du texte qu’il contient.

Un site peut être conçu initialement en se concentrant sur la taille de police de navigateur par défaut la plus courante de 16 pixels.

Mais en utilisant des unités rem, si un utilisateur augmente leur taille de police, l’intégrité de la mise en page seront préservées et le texte ne sera pas écrasé dans un espace rigide destiné à un texte plus petit.

Et si l’utilisateur diminue la taille de la police, la mise en page entière diminue et ils ne se retrouveront pas avec une petite poignée de texte dans un terrain vague de l’espace blanc.

Les utilisateurs modifient les paramètres de taille de la police pour toutes sortes de raisons, de la vue tendue au choix des paramètres optimaux pour les appareils dont la taille et la taille peuvent être très différentes distance de visualisation. La prise en compte de ces paramètres permet de bien meilleures expériences utilisateur.

Important à savoir:

Certains concepteurs utilisent des mises en page basées sur rem en conjonction avec un paramètre fixe px unité font-size sur l’élément html. Ceci est généralement fait pour qu’un changement de taille de police sur l’élément html puisse mettre à l’échelle la conception globale vers le haut ou vers le bas.

Je le déconseille fortement car il remplace la taille de la police que l’élément html hérite des paramètres du navigateur de l’utilisateur. Par conséquent, cela empêche les paramètres d’avoir un effet et supprime la capacité de l’utilisateur à optimiser pour une meilleure visualisation.

Si vous souhaitez modifier la taille de la police sur l’élément html, faites-le avec une valeur em ou rem car la taille de la police racine sera alors toujours un multiple du paramètre de taille de police du navigateur de l’utilisateur.

Cela vous permettra toujours de faire évoluer votre conception vers le haut ou vers le bas en modifiant la taille de la police de votre élément html, mais vous conserverez l’effet des paramètres du navigateur utilisateur.

Pourquoi utiliser des unités em

La valeur clé emLes unités offrent la possibilité de déterminer les valeurs de dimensionnement par une taille de police autre que celle de l’élément html.

Pour cette raison, l’objectif principal des unités em devrait être de permettre une évolutivité dans le contexte d’un élément de conception spécifique.

Par exemple, vous pouvez définir les valeurs paddingmargin et line-height autour d’un élément du menu de navigation pour utiliser les valeurs em.

De cette façon, si vous modifiez la taille de la police du menu, l’espacement autour des éléments du menu sera mis à l’échelle proportionnellement, indépendamment du reste du menu mise en page.

Dans la section précédente sur l’héritage, vous avez vu à quelle vitesse garder une trace de em les unités peuvent devenir incontrôlables. Pour cette raison, je recommande d’utiliser uniquement les unités em si vous en identifiez un besoin clair.

Application pratique

Il peut y avoir un débat entre les concepteurs de sites Web et je suis sûr que différentes personnes ont des approches préférées différentes, mais ma recommandation est la suivante.

Utilisez des unités em Pour:

Tout dimensionnement qui devrait être mis à l’échelle en fonction de la taille de police d’un élément autre que la racine.

De manière générale, la seule raison pour laquelle vous devrez utiliser des unités em est de mettre à l’échelle un élément dont la taille de police n’est pas par défaut.

Selon notre exemple ci-dessus, les composants de conception tels que les éléments de menu, les boutons et les en-têtes peuvent avoir leurs propres tailles de police explicitement indiquées. Si vous modifiez ces tailles de police, vous souhaitez que l’ensemble du composant soit mis à l’échelle proportionnellement.

Les propriétés communes auxquelles cette directive s’appliquera sont les suivantes : marginpaddingwidthheight et , lorsqu’ils sont utilisés sur des éléments dont la taille de police n’est pas par défaut.

Je recommande que lorsque vous utilisez des unités em, la taille de la police de l’élément sur lequel elles sont utilisées doit être définie dans des unités rem pour préserver l’évolutivité mais éviter la confusion d’héritage.

N’utilisez généralement pas les unités empour les tailles de police

Il est assez courant de voir des unités em utilisées pour le dimensionnement des polices, en particulier dans les en-têtes, mais je suggérerais que les conceptions sont plus faciles à gérer si les unités rem sont généralement utilisées pour la police dimensionnement.

La raison pour laquelle les en-têtes utilisent souvent des unités em est qu’elles sont un meilleur choix que les unités px, étant relatives à la taille du texte ordinaire. Cependant, les unités rem peuvent également atteindre cet objectif. Si un ajustement de la taille de la police sur l’élément html est effectué, les tailles de titre seront également mises à l’échelle.

Essayez de changer la taille de la police emsur l’élément html dans ce CodePen pour voir par vous-même:

Le plus souvent, nous ne voulons pas que nos tailles de police soient mises à l’échelle en fonction d’un élément autre que la racine, à quelques exceptions près.

Un exemple où nous pourrions vouloir emLe dimensionnement de la police basé sur

.container { width: 100%; max-width: 75rem;}