Guide complet Quand utiliser Em vs Rem

Vous avez peut-être accepté d'utiliser des unités de mesure flexibles, mais vous ne comprenez peut-être toujours pas quand utiliser rem et quand utiliser em. Ce tutoriel vous aidera à comprendre!

Tous les deux em et rem sont des unités flexibles et évolutives qui sont converties 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, il pourrait traduire dans le navigateur comme quoi que ce soit de 16px à 160px ou toute autre valeur.

Remplissage CSS défini à 1em Calcule à 16px Remplissage CSS défini à 1em Calcule à 160px

D'autre part px les valeurs sont utilisées telles quelles par le navigateur 1px affichera toujours exactement 1px.

Essayez le curseur sur cet exemple CodePen pour voir comment la valeur de rem et em les unités peuvent être traduites en différentes valeurs de pixel, tout en étant explicitement définies px les unités restent fixes en taille:

La grande question

En utilisant em et rem Les unités nous offrent une grande flexibilité dans nos conceptions et la possibilité d’agrandir ou de réduire les éléments 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..

Tous les deux em et rem Les unités offrent cette flexibilité et fonctionnent de manière similaire. La grande question est donc de savoir quand utiliser em valeurs et quand devrions-nous utiliser rem valeurs?

Différence cruciale

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

Nous allons commencer par revoir comment rem et em les unités travaillent à partir du sol pour s'assurer que vous connaissez tous les détails. Ensuite, nous passerons à Pourquoi Tu devrais utiliser em ou rem des unités.

Enfin, nous examinerons l’application pratique de quels éléments d’une conception typique vous devriez utiliser chaque type d’appareil sur.

Comment rem Unités converties en valeurs de pixels

Lors de l'utilisation rem unités, la taille en pixels à laquelle ils traduisent dépend de la taille de la police de l’élément racine de la page, c.-à-d. html élément. Cette taille de police racine est multipliée par le nombre que vous utilisez avec votre rem unité.

Par exemple, avec une taille de police d’élément racine de 16px, 10rem équivaudrait à 160px, soit 10 x 16 = 160.

Remplissage CSS défini sur 10rem Calcule à 160px

Comment em Unités converties en valeurs de pixels

Lors de l'utilisation em unités, la valeur de pixel que vous obtenez est une multiplication de la taille de la police sur l'élément à styler.

Par exemple, si un div a une taille de police de 18px, 10em équivaudrait à 180px, c'est-à-dire 10 x 18 = 180.

Rembourrage CSS défini à 10em Calcule à 180px (ou assez proche de lui)

Important à savoir:

C'est une idée fausse un peu répandue que em les unités sont relatives à la taille de la police de l'élément parent. En fait, conformément à la spécification W3, elles sont relatives à la taille de la police «de l'élément sur lequel elles sont utilisées».

Taille des polices de l'élément parent pouvez effet em valeurs, mais lorsque cela se produit, c’est uniquement à cause de l’héritage. Voyons pourquoi et voyons comment cela fonctionne en action.

L'effet de l'héritage sur em Unités

Travailler avec em les unités peuvent devenir délicates 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 annulé 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 em les unités utilisées déterminent 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, etc. En tant que tel, il est possible pour tout em valeur à effectuer par la taille de la police de l'un de ses parents.

Regardons un exemple. N'hésitez pas à essayer ceci dans CodePen pour vous-même au fur et à mesure que nous allons le parcourir. Au fur et à mesure, utilisez les outils de développement Chrome ou Firebug pour Firefox pour examiner les valeurs de pixels de notre em les unités sont calculées en.

Exemple de em Héritage

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 rembourrage de 1.5em, cette div héritera de la taille de la police 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 faire si nous enroulons une autre div autour de la première et mettons sa taille de police à 1,25 m?

Notre wrapper div hérite de la taille de la police racine de 16px et multiplie cela par son propre taille de police réglage de 1,25 m. Cela définit la div pour avoir une taille de police de 20px, soit 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 son nouveau parent div. Sa valeur de rembourrage de 1.5em équivaut maintenant à 30px, c'est-à-dire 1,5 x 20 = 30.

Cet effet d'échelle peut être encore renforcé si l'on ajoute un em taille de police basée sur notre div d'origine, disons 1.2em.

La div hérite du 20px taille de police de son parent, puis multiplie par son propre 1.2em réglage, en lui donnant une nouvelle taille de police de 24px, soit 1,2 x 20 = 24.

le 1.5em le rembourrage sur notre div va maintenant changer de taille avec la nouvelle taille de police, cette fois-ci 36px, c'est-à-dire 1,5 x 24 = 36.

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

Maintenant, notre remplissage est descendu à 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 em unités d'une manière gérable.

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:

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

Donc, alors que la taille de la police sur le html L'élément est ce qui détermine directement rem valeurs, cette taille de police peut avoir d’abord provenir des paramètres du navigateur.

Ainsi, les paramètres de taille de police du navigateur peuvent affecter la valeur de chaque rem unité utilisée dans une conception, ainsi que chaque em unité par héritage.

Effet de paramétrage du navigateur quand aucune taille de police HTML n'est définie

Sauf indication contraire, le html élément, il héritera de la taille de police par défaut dans le navigateur. Par exemple, prenons un site où aucun taille de police la propriété est définie sur le html élément.

Si un utilisateur utilise un navigateur dont la taille de police par défaut est de 16 pixels, la taille de la police racine sera de 16 pixels. Dans Chrome Developer Tools, vous pouvez voir ce qu’un élément a hérité en cochant Afficher les propriétés héritées sous le Calculé languette.

Dans ce cas 10rem équivaut à 160px, soit 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. À présent 10rem Se traduit par 180px, c'est-à-dire 10 x 18 = 180.

Effet de réglage du navigateur avec em Unité HTML Taille de police

Quand un em la taille de la police est définie sur le html élément, la valeur en pixels à traduire sera un multiple du paramètre de taille de police du navigateur.

Par exemple, si le site est html l'élément avait un taille de police propriété définie sur 1,25 m, la taille de la police racine serait 1,25 fois la taille du navigateur.

Si la taille de la police du navigateur était définie sur 16px, la taille de la police racine sortirait comme 20px, soit 1,25 x 16 = 20.

Dans ce cas 10rem serait égal 200px, soit 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, soit 1,25 x 20 = 25.

À présent 10rem serait égal 250px, soit 10 x 25 = 250.

Résumant em contre. rem Différence

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

• Traduction de rem unités en pixels est déterminé par la taille de la police du html élément. Cette taille de police est influencée par l'héritage du paramètre de taille de police du navigateur, sauf substitution explicite par une unité non soumise à l'héritage..

• Traduction de em les unités en valeurs de pixel sont déterminées 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 substitution explicite par une unité non soumise à l'héritage..

Pourquoi utiliser rem Unités:

Le plus grand pouvoir que rem L’offre d’unités n’est pas simplement qu’elles offrent un dimensionnement cohérent quel que soit l’héritage des éléments. Ils nous permettent plutôt de faire en sorte que les paramètres de taille de police des utilisateurs influencent chaque aspect de la présentation d'un site en utilisant rem unités où nous utilisions px des unités.

C’est pour cette raison que le but principal de l’utilisation de rem Les unités doivent garantir que, quelle que soit la taille de la police par défaut d'un navigateur, la mise en page est adaptée à 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..

Taille de police du navigateur 16px

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

Taille de police du navigateur 34px

Et si l'utilisateur diminue la taille de la police, la mise en page complète sera réduite et il ne restera pas une petite quantité de texte dans un espace vide d'espaces blancs..

Taille de la police du navigateur 9px

Les utilisateurs modifient les paramètres de taille de police pour toutes sortes de raisons, allant de la vision réduite au choix des paramètres optimaux pour les périphériques dont la taille et la distance de visualisation peuvent être très différentes. L'adaptation de ces paramètres permet une expérience utilisateur bien meilleure.

Important à savoir:

Certains designers utilisent rem mises en page basées en conjonction avec un fixe px unité taille de police mise sur le html élément. Cela se fait généralement de sorte qu'un changement de taille de police sur le html L'élément peut redimensionner la conception dans son ensemble.

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

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

Cela vous permettra toujours d’agrandir ou de réduire votre conception en modifiant votre html la taille de la police de l'élément, mais vous conserverez l'effet des paramètres du navigateur de l'utilisateur.

Pourquoi utiliser em Unités

La valeur clé em Les unités disponibles permettent de déterminer les valeurs de dimensionnement en fonction d’une taille de police différente de celle de la police. html élément.

Pour cette raison, le but principal de em les unités doivent être pour permettre l'évolutivité dans le contexte d'un élément de design spécifique.

Par exemple, vous pouvez définir le rembourrage, marge et hauteur de la ligne autour d'un élément de menu de navigation à utiliser em valeurs.

Menu avec une taille de police de 0.9rem

Ainsi, si vous modifiez la taille de la police du menu, l'espacement entre les éléments de menu sera proportionnel, indépendamment du reste de la présentation..

Menu avec une taille de police de 1.2rem

Dans la section précédente sur les successions, vous avez vu à quel point garder rapidement la trace des em les unités peuvent devenir incontrôlables. Pour cette raison, je recommande seulement en utilisant em unités si vous identifiez un besoin clair pour eux.

Application pratique

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

Utilisation em Unités pour:

Toute taille qui devrait é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 devez utiliser em unités consiste à redimensionner un élément dont la taille de police n'est pas celle 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 leur propre taille de police explicitement indiquée. Si vous modifiez ces tailles de police, vous souhaitez que le composant entier soit mis à l'échelle proportionnellement..

Les propriétés communes auxquelles cette directive s’applique sont marge, rembourrage, largeur, la taille et hauteur de la ligne paramètres, lorsqu'ils sont utilisés sur des éléments avec une taille de police autre que celle par défaut.

Je recommande que lorsque vous employez em unités, la taille de la police de l'élément sur lequel ils sont utilisés doit être définie dans rem unités pour préserver l'évolutivité mais éviter la confusion entre héritages.

Généralement, ne pas utiliser em Unités pour les tailles de police

C'est assez commun de voir em unités 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 rem les unités sont généralement utilisées pour le dimensionnement des polices.

Les en-têtes de raison utilisent souvent em unités est qu'ils sont un meilleur choix que px unités, étant relatives à la taille du texte normal. toutefois rem les unités peuvent aussi bien atteindre cet objectif. Si un ajustement de la taille de la police sur le html l'élément est fabriqué, la taille des en-têtes sera toujours aussi grande.

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

Plus souvent qu'autrement, 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 em Le dimensionnement des polices en fonction de la taille de la police du premier niveau pourrait être un menu déroulant. Un autre exemple pourrait être une icône de police utilisée dans un bouton, où la taille de l'icône devrait correspondre à la taille du texte du bouton..

Cependant, la plupart des éléments d'une conception Web auront tendance à ne pas avoir ce type d'exigence. Vous devrez donc généralement utiliser rem unités de dimensionnement des polices, avec em unités uniquement si elles sont spécifiquement nécessaires.

Utilisation rem unités pour:

Toute taille qui n'a pas besoin em unités pour les raisons décrites ci-dessus, et cela devrait échelle en fonction des paramètres de taille de police du navigateur.

Cela représente presque tout dans une conception standard comprenant la plupart des hauteurs, des largeurs, des rembourrages, des marges, des largeurs de bordures, la plupart des tailles de police, des ombres, pratiquement toutes les parties de votre mise en page..

En bref, tout ce qui peut être rendu évolutif avec rem unités, devraient être.

Pointe

Lors de la création de présentations, il est souvent plus facile de penser en pixels mais de les afficher en rem des unités.

Vous pouvez avoir des pixels pour rem calculs effectués automatiquement via un pré-processeur tel que Stylus / Sass / Less ou un post-processeur tel que PostCSS avec le plugin PXtoRem.

Vous pouvez également utiliser PXtoEM pour effectuer manuellement vos conversions..

Toujours utiliser rem Requêtes de médias

Fait important, lors de l'utilisation rem unités pour créer un design uniformément évolutif, vos requêtes média doivent également être en rem unités. Cela garantira que, quelle que soit la taille de la police du navigateur d'un utilisateur, vos requêtes multimédia y répondent et ajusteront votre mise en page..

Par exemple, si un utilisateur redimensionne le texte très haut, il se peut que votre disposition doive passer d’une colonne à l’autre à une colonne, comme sur un appareil mobile plus petit masqué..

Si vos points d'arrêt ont une largeur de pixel fixe, seule une taille de fenêtre d'affichage différente peut les déclencher. Cependant avec rem Les points d'arrêt basés ils répondront à la taille différente de police.

Ne pas utiliser em ou rem Pour:

Largeurs de disposition multi-colonnes

Les largeurs de colonne dans une mise en page doivent généralement être % afin qu'ils puissent s'adapter de manière fluide aux fenêtres de taille imprévisible.

Cependant, les colonnes simples doivent toujours incorporer rem valeurs via un largeur maximale réglage.

Par exemple:

conteneur CSS largeur: 100%; largeur maximale: 75rem;

Ceci garde la colonne flexible et évolutive, mais l'empêche de devenir trop large pour que le texte qu'elle contient soit facilement lisible..

Quand un élément doit être strictement indéchiffrable

Dans une conception Web typique, de nombreuses parties de votre mise en page ne peuvent pas être conçues pour être évolutives. Cependant, vous rencontrerez parfois des éléments nécessitant l'utilisation de valeurs fixes explicites afin d'empêcher la mise à l'échelle..

La condition préalable à l'utilisation de valeurs de dimensionnement fixes doit être que, si l'élément en question était mis à l'échelle, il se romprait. Cela ne vient vraiment pas souvent, alors avant que vous soyez tenté de les fouetter px unités, demandez-vous si leur utilisation est une nécessité absolue.

Emballer

Faisons un résumé rapide de ce que nous avons couvert:

• rem et em les unités sont calculées en valeurs de pixels par le navigateur, en fonction des tailles de police de votre conception.
• em les unités sont basées sur la taille de la police de l'élément sur lequel elles ont été utilisées.
• rem les unités sont basées sur la taille de la police du html élément.
• em les unités peuvent être influencées par l'héritage en taille de police de tout élément parent

• rem les unités peuvent être influencées par l'héritage de la taille de police à partir des paramètres de police du navigateur.

• Utilisation em unités de dimensionnement à mettre à l’échelle en fonction de la taille de la police d’un élément autre que la racine.
• Utilisation rem unités pour dimensionnement qui n'a pas besoin em unités, et cela devrait évoluer en fonction des paramètres de taille de police du navigateur.
• Utilisation rem unités sauf si vous êtes sûr d'avoir besoin em unités, y compris sur les tailles de police.
• Utilisation rem unités sur les médias
• Ne pas utiliser em ou rem en largeurs de mise en page multi-colonnes - utiliser % au lieu.
• Ne pas utiliser em ou rem si la mise à l'échelle provoque inévitablement la rupture d'un élément de présentation.

J'espère que vous avez maintenant construit une image robuste et complète de la em et rem les unités fonctionnent, et grâce à cela, savent comment les utiliser au mieux dans vos conceptions.

Je vous encourage à essayer les consignes d'utilisation contenues dans ce didacticiel et à profiter pleinement de l'évolutivité et de la réactivité des mises en page qu'elles vous permettront de créer..