Pourquoi nous utilisons les REM plutôt que les pixels dans nos développements web ? Une explication claire et précise de la différence entre deux unités de mesures REM et pixels.
Rem et pixel (px) sont deux unités de mesures fréquemment utilisés en CSS et HTML pour définir la taille de la police, la marge ou bien une taille d'image par d'exemple.
Les deux unités ont pourtant une grande différence en terme d'accessibilité web, car un pixel n'est pas responsif et c'est pour cela qu'il est préférable d'utiliser les REM. On vous explique pourquoi.
Le problème des pixels
Un pixel (px) n'est pas responsif
Les pixels sont une valeur fixe. 1 pixel = 1 pixel. C'est une unité absolue et définit. C'est un bon point à première vue, car vous pouvez donc designer sur mesure, au pixel près.
Mais sur mesure ne devrait-il pas plutôt être un design qui s'adapte à ses différents utilisateurs ? C'est en tout cas ma définition d'un bon design. Et c'est là, que les pixels me posent un problème, car en tant que valeur absolue 1 px restera toujours 1 Px. Il ne s'adaptera donc pas aux préférences des internautes de nos sites webs.
Les unités -Pixels- crées donc des barrières à l'accessibilité web (pour les malvoyants par exemple).
Unité Rem : la solution ?
1 REM (root empheral unit, root = racine en anglais) s'adapte lui aux choix de résolution de son utilisateur ! Oui le design CSS et l'HTML s'adapteront en fonction des préférences définit par l'internaute dans son navigateur. (Google par exemple)
Par défaut 1 rem = 16 pixels, mais vous pouvez par exemple définir dans vos préférences qu'un 1 rem = 24 pixels. Cela permettra d'avoir, un design de police plus grosse et donc plus lisible.
Un exemple ?
Vous avez déjà sûrement vue cette fonctionnalité . Sur un Iphone par exemple. Un effet "zoom" sur les messages, e-mails, etc.. Cette fonctionnalité d'affichage responsif, adaptée aux préférences utilisateurs est une belle illustration de l'avantage d'utiliser les REM (unité relatif) sur vos pages.
Testez votre site ! Testez directement l'affichage adaptatif de vos éléments et textes :
- Allez sur vos paramètres de navigateurs
- Onglet apparence
- Changez la taille de la police
- Retournez sur votre site
- Testez vos affichages en REM vs Pixel
Convertir les pixels en REM
Vous avez un site web avec un design en Pixel et souhaitez le convertir en REM ? C'est assez simple. (Surtout si vous utilisez Webflow 😉)
1 rem = 16 pixel. Il vous suffit donc de diviser les unités de vos design en pixel par 16.
Par exemple, une police d'écriture qui avait pour mesure 32 pixels devient : 2 rem
32 (px) /1 6 = 2 (rem)
Comment convertir les Pixel en REM sur Webflow ?
"Webflow made it easy"
Vous pouvez effectuer la division directement dans le designer.
.jpg)
.jpg)
