Si vous avez déjà passé un peu de temps à bidouiller du CSS, vous vous êtes probablement déjà retrouvé devant une maquette en vous demandant : « Devrais-je utiliser des pixels ici, ou plutôt une valeur en rem ? »
Si vous travaillez sur une largeur d’écran Full HD — plus précisément 1920px — et que vous souhaitez la convertir en rem, vous êtes au bon endroit. Nous allons détailler le calcul exact, expliquer pourquoi cela fonctionne à l’aide d’une analogie ultra-simple, et vous permettre de vous remettre à coder en un rien de temps.
La réponse rapide : 1920px en rem
Allons droit au but. En supposant que votre site web utilise la taille de police par défaut standard des navigateurs (16px), 1920px équivaut exactement à 120rem.
Comment sommes-nous arrivés là ? C’est une simple division :1920 ÷ 16 = 120
C’est tout. Mais si vous voulez comprendre pourquoi nous divisons par 16, pourquoi nous nous embêtons avec les rem en premier lieu, ou comment éviter de faire ce calcul, restez avec moi encore une minute.
(Astuce de pro : Si vous en avez marre de faire ces calculs de tête, ajoutez simplement un convertisseur pixel en rem pratique à vos favoris pour qu’il fasse le gros du travail à votre place).
Pixels vs Rems : l’analogie de la « pâtisserie »
Pour comprendre pourquoi les développeurs web sont si obsédés par le rem, il peut être utile d’éloigner son regard de l’écran et de faire un tour en cuisine.
Pensez aux pixels (px) comme à un moule à gâteau rigide en métal. Si vous avez un moule de 23 cm, il fera toujours 23 cm. Peu importe que vous cuisiniez pour deux personnes ou pour vingt personnes : le moule refuse de changer de taille. En web design, le pixel est une unité stricte et absolue. Si vous définissez un bloc à 1920px, il restera à 1920px, même si l’utilisateur le consulte sur un minuscule smartphone ou s’il a une très mauvaise vue et a besoin de tout zoomer.
Les rems, en revanche, ressemblent à une recette adaptable. Imaginez une recette de pancakes qui indique « 1 tasse de farine par personne ». Si une personne mange, vous utilisez 1 tasse. Si quatre personnes mangent, la recette s’adapte automatiquement à 4 tasses.
En CSS, rem signifie « root em » (em racine). Il se base sur la racine (root, c’est-à-dire la taille de police de base définie par votre utilisateur dans son navigateur) et adapte tout proportionnellement à partir de là.
Le chiffre magique : 16
Par défaut, pratiquement tous les navigateurs web définissent la taille de police racine à 16px.
Ainsi, lorsque vous dites au CSS de donner une largeur de 1rem à un conteneur, le navigateur se dit : « D’accord, la taille de base est de 16px. Faisons un conteneur de 16px de large. »
Si vous voulez un conteneur Full HD de 1920 pixels de large, il vous suffit de vous demander : « Combien de fois y a-t-il 16 dans 1920 ? »
1920 ÷ 16 = 120
Vous écrivez max-width: 120rem; dans votre feuille de style, et le tour est joué. Et si jamais vous devez faire le chemin inverse (par exemple en lisant le code de quelqu’un d’autre et en vous demandant à quoi diable correspond 120rem en pixels classiques), vous pouvez toujours utiliser un convertisseur rem en pixel.
Pourquoi devriez-vous vous en soucier ? (L’angle de l’accessibilité)
Vous vous dites peut-être : « Les maths, c’est embêtant. Pourquoi ne pas simplement écrire 1920px et en finir là ? »
C’est tout à fait possible. Mais concevoir avec des rem rend votre site web incroyablement accessible aux utilisateurs qui ont besoin d’agrandir l’affichage. Si un utilisateur malvoyant modifie la taille de police par défaut de son navigateur pour la faire passer de 16px à 24px, un site conçu entièrement en px conservera obstinément la même taille, ce qui entraîne souvent un chevauchement du texte ou le rend illisible.
En revanche, si vous avez conçu votre site avec des rem, toute la mise en page respire et s’adapte parfaitement à l’échelle, en respectant les préférences de l’utilisateur. C’est magique, et cela démontre que vous êtes un développeur chevronné qui se soucie réellement de l’accessibilité.
Votre pense-bête CSS rapide
Si vous ne voulez pas sortir la calculatrice à chaque fois que vous écrivez du CSS, voici un guide de référence rapide basé sur la valeur racine standard de 16px.
La formule : Taille cible en pixels ÷ 16 = valeur en rem
- 16px = 1rem (La valeur de base)
- 24px = 1.5rem
- 32px = 2rem (Parfait pour les titres standards)
- 48px = 3rem
- 64px = 4rem
- 768px = 48rem (Point de rupture tablette classique)
- 1024px = 64rem (Point de rupture ordinateur classique)
- 1440px = 90rem (Grand écran)
- 1920px = 120rem (Écran Full HD)
La prochaine fois que vous vous retrouverez face à une maquette en 1920px, rappelez-vous simplement l’analogie de la recette adaptable. Divisez par 16, appliquez 120rem, et continuez à créer des projets incroyables !