Lors de la conception avec Elementor, vous remarquerez peut-être que certains éléments ont des options de dimensionnement, vous permettant de choisir PX, EM, REM, %, VW ou VH. Mais que signifient réellement ces options, et quand devriez-vous utiliser l’une plutôt que l’autre?
Commençons par les bases.
En CSS, vous pouvez spécifier des tailles ou des longueurs d’éléments à l’aide de différentes unités de mesure. Les unités de mesure que vous trouverez dans certaines options Elementor incluent PX, EM, REM, %, VW et VH, bien qu’il en existe plusieurs autres disponibles en CSS. Tous les éléments Elementor n’offriront pas toutes ces unités. Elementor ne présente que les options qui ont le plus de sens pour l’élément donné.
L’aspect le plus important à apprendre sur les différentes unités est que certaines unités, telles que PX sont des unités absolues, et d’autres sont des unités relatives.
Unités absolues
PX: Les pixels (px) sont considérés comme des unités absolues, bien qu’ils soient relatifs au DPI et à la résolution du périphérique de visualisation. Mais sur l’appareil lui-même, l’unité PX est fixe et ne change en fonction d’aucun autre élément. L’utilisation de PX peut être problématique pour les sites réactifs, mais elle est utile pour maintenir un dimensionnement cohérent pour certains éléments. Si vous avez des éléments qui ne doivent pas être redimensionnés, l’utilisation de PX est un bon choix.
Unités relatives
EM : par rapport à l’élément parent
REM : par rapport à l’élément racine (balise HTML)
%: Par rapport à l’élément parent
VW : par rapport à la largeur de la fenêtre d’affichage
VH : par rapport à la hauteur de la fenêtre d’affichage
Contrairement au PX, les unités relatives telles que %, EM et REM sont mieux adaptées à la conception réactive et aident également à répondre aux normes d’accessibilité. Les unités relatives s’adaptent mieux sur différents appareils car elles peuvent évoluer vers le haut et vers le bas en fonction de la taille d’un autre élément.
Regardons un exemple simple.
Dans la plupart des navigateurs, la taille de police par défaut est de 16px. Les unités relatives calculent la taille à partir de cette base. Si vous modifiez cette base en définissant une taille de base pour la balise HTML via CSS, cela devient la base de calcul des unités relatives dans le reste de la page. De même, si un utilisateur ajuste la taille de sa police, cela devient alors la base de calcul des unités relatives.
Alors, que signifient ces unités lorsqu’il s’agit de la valeur par défaut de 16px?
Le nombre que vous spécifiez multiplie ce nombre par la taille par défaut.
1em = 16px (1 * 16)
2em = 32px (2 * 16)
.5em = 8px (.5 * 16)
1rem = 16px
2rem = 32px
.5rem = 8px
100% = 16px
200 % = 32 px
50 % = 8 px
Ok, super, mais que se passe-t-il si vous ou l’utilisateur modifiez la taille par défaut? Comme il s’agit d’unités relatives, les valeurs de taille finales seront basées sur la nouvelle taille de base. Bien que la valeur par défaut soit 16px, si vous ou l’utilisateur le changez en 14px, les tailles calculées finiront par être:
1em = 14px (1 * 14)
2em = 28px (2 * 14)
.5em = 7px (.5 * 14)
1rem = 14px
2rem = 28px
.5rem = 7px
100% = 14px
200 % = 28 px
50 % = 7 px
Cela donne à l’utilisateur la liberté d’ajuster la taille de police de son navigateur par défaut, tout en conservant l’échelle relative de chaque élément que vous avez spécifié.
Quelle est la différence entre EM et REM?
En regardant le graphique ci-dessus, il montre em et REM exactement les mêmes. Alors, en quoi diffèrent-ils?
En termes simples, ils diffèrent en fonction de l’héritage. Comme mentionné, REM est basé sur l’élément racine (HTML). Chaque élément enfant qui utilise REM utilisera alors la taille racine HTML comme point de calcul, qu’un élément parent ait ou non des tailles différentes spécifiées.
EM, d’autre part, est basé sur la taille de police de l’élément parent. Si un élément parent a une taille différente de celle de l’élément racine, le calcul EM sera basé sur l’élément parent et non sur l’élément racine. Cela signifie que les éléments imbriqués qui utilisent EM pour le dimensionnement peuvent parfois finir par être d’une taille que vous n’aviez pas prévue. D’autre part, il vous donne un contrôle plus fin si vous en avez besoin pour spécifier la taille d’une zone particulière d’une page.
Alors, qu’en est-il de %, VW et VH? De quoi s’agit-il?
Alors que PX, EM et REM sont principalement utilisés pour le dimensionnement des polices, %, VW et VH sont principalement utilisés pour les marges, le rembourrage, l’espacement et les largeurs/hauteurs.
Pour répéter, VH signifie « hauteur de la fenêtre d’affichage », qui est la hauteur de l’écran visible. 100VH représenterait 100% de la hauteur de la fenêtre d’affichage, ou la hauteur totale de l’écran. Et bien sûr, VW signifie « largeur de la fenêtre d’affichage », qui est la largeur de l’écran visible. 100VW représenterait 100% de la largeur de la fenêtre d’affichage, ou toute la largeur de l’écran. % reflète un pourcentage de la taille de l’élément parent, quelle que soit la taille de la fenêtre d’affichage.
Regardons quelques exemples où Elementor donne des options %, VW et VH.
Largeurs de colonne : si vous modifiez la disposition d’une colonne Elementor, vous remarquerez qu’il n’y a qu’une seule unité de dimensionnement de largeur disponible – %. Les largeurs de colonne ne fonctionnent bien et de manière réactive que lors de l’utilisation de pourcentages, de sorte qu’aucune autre option n’est donnée.
Marges : les marges d’une section peuvent être spécifiées en PX ou en %. L’utilisation de % est généralement préférable pour s’assurer que les marges ne deviennent pas plus grandes que le contenu lors de la réduction pour un appareil mobile par exemple. En utilisant un pourcentage de la largeur de l’appareil, vos marges resteront par rapport à la taille du contenu, ce qui est presque toujours préférable.
Rembourrage : le rembourrage d’une section peut être spécifié en PX, EM ou %. Comme pour les marges, il est souvent préférable d’utiliser EM ou % afin que le rembourrage reste relatif à la taille de la page.
Taille de police : si vous modifiez la typographie d’un élément, tel qu’un en-tête, vous verrez quatre choix : PX, EM, REM et VH
Avez-vous déjà créé un grand titre et admiré à quel point il était superbe sur ordinateur, pour vous rendre compte qu’il était beaucoup trop grand sur mobile? (Aveu de culpabilité : je l’ai fait, plus d’une fois).
La clé pour résoudre ce problème avec élégance est d’utiliser EM, REM ou VW au lieu de PX. Ce que vous choisissez dépend de votre situation particulière. Je choisis généralement EM parce que je veux que la taille soit relative au parent du titre. Mais si vous préférez que la taille soit relative à la taille racine (HTML), choisissez plutôt REM. Ou, vous pouvez le définir pour qu’il soit relatif à la largeur de la fenêtre d’affichage (VW) si cela fonctionne mieux pour votre cas.
Notez que vous pouvez également définir des valeurs PX de taille de police spécifiques par appareil à l’aide des icônes de périphérique pour spécifier une taille pour Desktop, Tablet et Mobile. Mais cela impose toujours des limites à la réactivité et à l’accessibilité, alors gardez cela à l’esprit si vous choisissez PX.
En savoir plus sur VW et VH
Les unités de fenêtre d’affichage représentent un pourcentage de la fenêtre d’affichage actuelle du navigateur (taille actuelle du navigateur). Bien que similaire aux unités en %, il y a une différence. Les unités de fenêtre d’affichage sont calculées en pourcentage de la taille actuelle de la fenêtre d’affichage du navigateur. En revanche, les unités de pourcentage sont calculées sous la forme d’un pourcentage de l’élément parent, qui peut être différent de la taille de la fenêtre d’affichage.
Prenons un exemple de fenêtre d’affichage d’écran mobile de 480px x 800px.
1 VW = 1 % de la largeur de la fenêtre d’affichage (ou 4,8 px)
50 VW = 50 % de la largeur de la fenêtre d’affichage (ou 240 px)
1 VH = 1 % de la hauteur de la fenêtre d’affichage (ou 8 px)
50 VH = 50 % de la hauteur de la fenêtre d’affichage (ou 400 px)
Si la taille de la fenêtre d’affichage change, la taille de l’élément change respectivement.
Quand devriez-vous utiliser une unité plutôt qu’une autre?
En fin de compte, il n’y a pas de réponse parfaite à cette question. En général, il est souvent préférable de choisir l’une des unités relatives plutôt que PX afin que votre page Web ait les meilleures chances de rendre un design magnifiquement réactif. Choisissez PX cependant, si vous devez vous assurer qu’un élément ne se redimensionne jamais à un point d’arrêt et reste le même, qu’un utilisateur ait choisi ou non une taille par défaut différente. Les unités PX garantissent des résultats cohérents, même si ce n’est pas idéal.
EM est relatif à la taille de police de l’élément parent, donc si vous souhaitez mettre à l’échelle la taille de l’élément en fonction de la taille de son parent, utilisez EM.
REM est relatif à la taille de la police racine (HTML), donc si vous souhaitez mettre à l’échelle la taille de l’élément en fonction de la taille de la racine, quelle que soit la taille du parent, utilisez REM. Si vous avez utilisé EM et que vous rencontrez des problèmes de dimensionnement dus à de nombreux éléments imbriqués, REM sera probablement le meilleur choix.
VW est utile pour créer des éléments pleine largeur (100%) qui remplissent toute la largeur de la fenêtre d’affichage. Bien sûr, vous pouvez utiliser n’importe quel pourcentage de la largeur de la fenêtre d’affichage pour atteindre d’autres objectifs, tels que 50% pour la moitié de la largeur, etc.
VH est utile pour créer des éléments pleine hauteur (100%) qui remplissent toute la hauteur de la fenêtre d’affichage. Bien sûr, vous pouvez utiliser n’importe quel pourcentage de la hauteur de la fenêtre d’affichage pour atteindre d’autres objectifs, tels que 50% pour la moitié de la hauteur, etc.
% est similaire à VW et VH, mais ce n’est pas une longueur relative à la largeur ou à la hauteur de la fenêtre d’affichage. Il s’agit plutôt d’un pourcentage de la largeur ou de la hauteur de l’élément parent. Les unités de pourcentage sont souvent utiles pour définir la largeur des marges, par exemple.
Elementor facilite le choix de l’option la mieux adaptée à votre conception. En fin de compte, c’est votre choix.
Ce qu’il faut savoir sur Em et Rem
L’unité Em :
- Lorsqu’il est utilisé sur une propriété font-size, em est relatif à la taille de police du parent.
- 1em ne changera rien. Cela signifie copier la taille de police du parent.
- Donc, 120% em équivaut à 120% de la taille de police du parent.
- ⚠️ Un problème : si vous modifiez la taille de police du parent, vous affecterez toutes les tailles de police suivantes pour tous les éléments enfants de ce parent. Ainsi, en appliquant l’unité em aux enfants au sein d’une hiérarchie, vous pourriez avoir des effets de mise à l’échelle astronomiques si vous modifiez la taille de la police racine.
- ⭐ Meilleure pratique: Em est idéal pour définir le rembourrage, les marges et les largeurs. En effet, lorsque vous utilisez em pour autre chose que la taille de police, ce n’est pas relatif au parent. Il est relatif à sa propre taille de police.
- 👍 Ainsi, si vous utilisez l’unité em sur une propriété width, la largeur sera mise à l’échelle avec la taille de police de cet élément, et non avec la taille de police de l’élément parent.
L’unité Rem :
- Au lieu d’être relative au parent, l’unité rem est relative à l’objet racine : l’élément HTML.
- Vous pouvez modifier la taille de police sur l’élément HTML pour modifier la taille de police sur tous les objets à l’aide de l’unité rem.
- ⚠️ Un problème : il n’est pas nécessaire de définir une taille de police dans l’élément HTML. Cela peut parfois créer des problèmes sur la route, alors utilisez-le avec parcimonie.
- ⭐ Meilleure pratique: Les unités Rem évitent les problèmes de mise à l’échelle de l’unité Em, elles sont donc un excellent choix lors de la définition de la taille de police pour la conception Web responsive.
