Table des matières
L’éditeur visuel du page builder Elementor propose de faire ses réglages dans une série d’unités de mesure : px, %, em, rem, vw, vh.
Quelle est la différence ? Que signifient ces unités et comment fonctionnent-elles ?
Vous voulez tout savoir, je vais tout vous expliquer.
Elementor n’est, en grande partie, qu’une version WYSIWYG (what you see is what you get, ce que vous voyez est ce que vous obtenez) du langage CSS qui sert à formater l’apparence visuelle d’une page construite avec des éléments HTML.
Elementor réutilise donc les unités de mesure disponibles en CSS.
Px = pixels
Cette unité parait évidente. On règle la taille en px, c’est-à-dire en pixels, les composants de base d’un écran d’ordinateur, de tablette ou de téléphone mobile ou smartphone.
Le problème : un réglage en pixels est fixe, on parle d’unité absolue, donc pas adaptable, donc pas responsive.
Si vous dites qu’une image doit faire 400px de haut sur 400px de large, elle fera 400 pixels sur tous les écrans : elle pourra donc être trop petite sur ordinateur, et trop grande sur mobile.
Pour pallier ce problème, on dispose des autres unités, les unités relatives.
em = taille du parent element
Elementor permet de définir des réglages de taille pour ses divers éléments : la section, la colonne, le widget (texte, image, titre, etc).
L’unité em consiste à prendre la taille du texte définie pour le « parent » (le conteneur, l’élément qui contient) d’un élément donné comme référence.
C’est donc une unité délicate à utiliser, vu que la taille de l’élément parent varie.
rem = taille du root element
Le root element, élément racine, désigne le document HTML lui-même, la page entière. Il a une taille par défaut de 16 pixels.
Les utilisateurs peuvent paramétrer leur navigateur pour changer cette taille par défaut : des déficients visuels peuvent par exemple la mettre à 20 pixels.
Il est possible que le thème, ou les réglages de l’outil de personnalisation, aient modifié la taille par défaut de l’élément html, en écrivant par exemple :
html {font-size:18px;}
Si le rem vaut 16 pixels, alors :
- 1 rem vaut 16px
- 2 rem valent 32px, etc
Si le rem vaut 20 pixels, alors
- 1 rem vaut 20px
- 2 rem valent 40px, etc
Ainsi, définir les tailles des éléments en fonction du rem permet de garantir la cohérence d’un design, quels que soient les choix de l’utilisateur, bien que le webdesigner ne les connaisse jamais d’avance.
Le rem évite aussi d’avoir à faire des calculs du genre « ok, si la taille de mon paragraphe de base est de 18 pixels, et que je veux faire des tailles de marges en rapport avec la taille du texte, je dois donc calculer des multiples de 18… » Dans ce cas, on dirait que 1rem = 18px et on mesurerait tout en rem : 1 rem, 2 rem, 0,5 rem etc.
% = relatif à la taille de l’élément parent
Le pourcentage réfère à la taille de l’élément parent / conteneur.
Par exemple,
- une image contenue dans une colonne
- une colonne contenue dans une section
Donc si ce parent a une taille relative, alors, en exprimant la taille de l’élément enfant en unité %, on garantit que cet élément va se dimensionner correctement.
Par exemple, si on a une section paramétrée pour mesurer 1200 pixels de large sur ordinateur, une colonne paramétrée pour faire 50% mesurera 600 pixels, c’est à dire 50% de la taille de son parent.
vw = viewport width
vw signifie viewport width, c’est à dire largeur du viewport.
Le viewport n’est pas exactement l’écran : c’est la taille de l’espace qui, dans le navigateur, affiche la page web. En d’autres termes, c’est la taille de l’écran moins la taille de l’interface du navigateur et du système d’exploitation.
L’unité vw est graduée de 1 à 100.
Donc si le viewport fait 600 pixels de large, 1 vw = 6 px.
Et si le viewport fait 1200 px, 1vw = 12px.
vh = viewport height
vh signifie viewport height, c’est à dire hauteur du viewport.
L’unité vh est graduée de 1 à 100.
Cette unité est particulièrement utile quand on veut faire qu’une section, une image, un texte, prenne toute la hauteur du viewport, quelle que soit sa taille. On met alors vh = 100.
Quelle unité utiliser où ?
Les unités sont plus ou moins adaptées à tel ou tel usage.
Voici quelques bonnes pratiques :
Colonnes : en % ou en vw
Il vaut mieux définir les colonnes en pourcentages ou en vw, puisqu’elles doivent se répartir harmonieusement et se redimensionner en fonction de la taille de l’élément qui les contient.
Donc par exemple si on veut deux colonnes faisant moitié de l’écran, on définit leur largeur à 50% ou 50vw.
Ainsi, chaque colonne fera 360px si l’écran fait 720px, mais fera 960px si l’écran fait 1920px.
Margin / marge externe : en px, en rem ou en %
Si on définit les marges en pourcentage d’un élément conteneur, elles vont se redimensionner en fonction de la taille de cet élément.
Par exemple, si on met un bloc texte dans une colonne pleine largeur d’une section elle aussi en pleine largeur, et qu’on attribue une marge de 1% à ce bloc texte, alors :
- sur écran d’ordi à 1920 pixels, la colonne et la section feront 1920 pixels, donc la marge fera 19,2 pixels
- sur écran mobile à 720 pixels, colonne et section feront 720 pixels et la marge fera 7,2 pixels
Si on définit la marge en pixels alors elle ne se redimensionnera pas : elle fera par exemple 10 pixels sur tous les écrans.
Si on définit la marge en rem, par ex 2rem, alors la marge ne se redimensionnera pas non plus : elle fera la taille de texte du root element (l’élément HTML). Si ce root element fait 20px, alors la marge de 2 rem fera toujours 40px.
Padding / marge interne : en px, en rem ou en %
Même idée : en pourcentage ces marges internes se redimensionneront, mais pas en rem ou en pixels.
Taille de texte et de titre : en px, em, rem ou vw
C’est une question de préférence.
On peut définir la taille d’un texte ou d’un titre en pixels, en mode responsive, mais alors il ne se redimensionnera pas, alors que la taille d’un écran d’ordinateur ou d’un écran de tablette ou de téléphone peut varier substantiellement.
La définir en em ou en rem a plus de sens.
De même, la définir en vw : vous pouvez décider qu’un titre doit faire 80vw, soit 80% de la taille de l’écran, quelle que soit cette taille.
Quelle différence entre VW / VH et % ?
VW et VH dépendent de la taille du viewport.
% dépend de la taille de l’élément parent.
Donc, si une section Elementor fait 100vw, elle s’ajuste pour faire 100% de la largeur du viewport.
Tandis que si elle fait 100% de son élément parent qui a des marges gauche et droite de 1rem, le rem valant 16px, alors la section ne fait pas 100% de la largeur du viewport, elle fait la largeur moins les deux marges de 16+16 = 32px.
Ok mais le truc c’est que le viewport il varie énormément, ça veut dire qu’on peut pas faire du webdesign en pixels ?
Eh oui c’est tout le problème. Même des appareils de type différent (ordinateur, tablette, mobile) ont des tailles d’écrans, en pixels, et en définition (dpi), très variables, donc il est absolument déconseillé de faire tout un design en pixels.
Perso j’utilise en priorité les REM pour tous les éléments de petite taille (margin, padding, tailles de titres HN et de textes), et les %, les vh et les vw pour gérer les largeurs et hauteurs de colonnes et de section.