Le design system dit 1 rem = 16 px, sauf si `html { font-size: 62,5 % }`. Vous entrez la racine. Un 24 px devient 1,5 rem — pas une cote de meuble.
La maquette Figma est en px, le CSS du design system en rem. Le job : le rapport racine / parent, pas le SI.
CompuTools utilise la même formule : rem = px / root.
Pièges
- Zoom utilisateur et
text-size-adjust: un rem reste relatif, c’est le but. %d’une largeur de boîte ≠%d’unefont-size: ici, le % est traité comme une fraction du parent police.- Unités physiques pour un plan IKEA.
Comment l’utiliser
- Valeur, unité source, racine, parent.
- Recopiez px / rem / em.
- Une ombre ou un dégradé : les générateurs CSS, puis revenez si besoin.