Il existe de nombreuses unités de mesure en CSS, et donc sur Webflow. Pixel et REM sont des unités de mesure des plus utilisées en CSS et en HTML, pour définir la taille des éléments d'un site. Les deux unités sont très différentes, notamment quant à la flexibilité et le responsive.
Découvrez quelle unité utiliser pour votre site Webflow, le Pixel ou le REM ?
Quelles différences entre Pixels et REM ?
Le Pixel est une unité de taille absolue, tandis que le REM est une unité relative.
Le pixel est donc une unité relative à la résolution et à la taille de l'écran. Elle permet donc un affichage ultra visible, même sur petite taille.
REM signifie "root empheral unit". Il reprend les propriétés de l'unité "em". Elle correspond donc à la taille de la police d'un élément, élément racine (root). Le REM permet de définir une valeur constante, égale à la taille de la police qui s'affiche sur votre écran. Elle est donc notamment utilisée pour développer des éléments et propriétés CSS responsives. Cette unité de mesure s'adapte donc parfaitement à Webflow. C'est pour cela que nous vous conseillons de définir la taille de vos éléments en REM.
Le REM est une unité de mesure relative à la taille de police par défaut du navigateur. Généralement, les navigateurs utilisent 16 pixels comme taille de police par défaut. Les utilisateurs peuvent mettre à jour leurs préférences et modifier l'affichage sur les tailles de police. L'unité REM permet à votre site web de rester accessible et lisible malgré les mises à jour de des préférences et paramètres d'affichage depuis les navigateurs.
Pourquoi utiliser REM ?
Les unités relatives sont les plus appréciées car elles sont plus adaptables. Les unités telles que le REM sont alors de plus en plus utilisées, notamment pour le efficacité et leur simplicité. Elles permettent d'avoir plus de flexibilité ainsi qu'améliorer le responsive et la lisibilité des éléments.
Ce qui rend l'utilisation de l'unité de mesure REM très puissante, c'est qu'elle permet d'assurer que les paramètres d'affichage de taille de police n'aient aucun impact sur la mise en page de votre site. En utilisant le REM, vous pouvez être sûr, que quelque soit la taille de police par défaut du navigateur de votre visiteur, le design et la mise en page s'ajusteront automatiquement. Avec le REM, la mise en page s'ajuste automatiquement pour s'adapter à la taille du texte que contient votre page.
Comment convertir les Pixels en REM ?
Sur Webflow, vous pouvez facilement convertir un design développé en Pixels, vers du REM.
Vous pouvez convertir les Pixels en REM, directement dans le designer :
- 1 REM = 16 pixel
- Vous n'avez qu'à diviser vos éléments pixels par 16
Vous pouvez aussi utiliser une extension pour convertir vos éléments en REM. Quelques extensions et outils compatibles avec Webflow deviennent rapidement essentielles pour développer des sites performants.
L'extension Finsweet, pour convertir vos px en rem
Pour convertir rapidement vos designs crées en Pixels vers du REM, vous pouvez utiliser l'extension Finsweet for Webflow. Ils vous suffit de télécharger l'extension, d'ouvrir votre projet Webflow, puis l'extension Client-first. Dirigez vous vers "Px to REM Migrator", puis cliquez sur Start Migration.
D'ailleurs, si vous n'aviez pas encore essayé cette extension Chrome, nous vous conseillons de la télécharger. Elle pourra vous faire gagner du temps dans le développement de votre site !
