Convertissez les pixels en rem avec la base de votre choix

Le pixel se convertit en rem par une seule division : le nombre de pixels divisé par la taille de police de base. Avec le réglage par défaut du navigateur, cette base vaut 16 px, donc 24 pixels donnent 1,5rem et 14 pixels donnent 0,875rem. L’unité rem renvoie à la taille de texte de l’élément html, la racine du document [1].

C’est le sens le plus fréquent au quotidien. La maquette arrive avec des mesures en pixels, puisque les logiciels de design comptent ainsi, et la feuille de styles s’écrit en rem pour que la mise en page réponde aux réglages du lecteur.

Le résultat porte quatre décimales, car pour une base de 16 px un seul pixel vaut exactement 0,0625rem et les tailles de texte produisent des nombres comme 0,875 ou 1,125.

Vous trouverez plus bas un tableau de 30 valeurs pour trois bases, la marche à suivre pour automatiser la conversion dans le projet et un tour des propriétés CSS avec la réponse sur celles à passer en rem. Le chemin inverse revient au convertisseur de rem en pixels.

La formule tient en une opération : rem = pixels ÷ taille de police de base. C’est l’inverse de la multiplication qui transforme les rem en pixels.

Exemple avec un espacement de 20 px : pour une base de 16, cela donne 20 ÷ 16 = 1,25rem. La même valeur avec la base de 10 px de la technique des 62,5 % donne 2rem, puisque diviser par dix se fait de tête.

Les mesures d’une maquette produisent souvent des fractions : 18 pixels valent 1,125rem, 30 pixels valent 1,875rem et 22 pixels valent 1,375rem. Les trois sont exactes et la plupart des systèmes de design les conservent telles quelles, si bien que vous les écrivez directement dans la feuille de styles.

L’unité em se calcule de la même manière, en divisant par la taille de police de l’élément parent au lieu de celle de la racine : ce calcul revient au convertisseur de pixels en em. Si la mesure part vers le papier, le même fichier relève du convertisseur de pixels en pouces.

Pour une valeur isolée, le convertisseur ci-dessus suffit. Pour une feuille de styles entière, le calcul passe à un outil qui l’exécute à chaque compilation du projet.

Dans un préprocesseur, vous écrivez une fonction qui divise le nombre par la base. En Sass, cela donne @function rem($px) { @return math.div($px, 16) * 1rem; }, puis dans la règle vous posez padding: rem(24) et obtenez 1.5rem. La base tient alors en un seul endroit et se modifie une fois.

La deuxième voie travaille sur la feuille terminée et laisse votre façon d’écrire intacte. Le module postcss-pxtorem, branché sur l’étape de compilation, parcourt le fichier de sortie et remplace les pixels par des rem selon la base configurée. Au cours des 30 derniers jours, le registre npm en a enregistré plus de 870 000 téléchargements [2].

La troisième voie passe par les variables CSS. Vous écrivez --space-6: 1.5rem une fois dans la feuille, puis vous appelez le nom plutôt que le nombre. La conversion se fait alors une seule fois, à la définition de l’échelle, et non dans chaque règle.