Pixels à rem
Convertissez les valeurs de pixels en rem pour les mises en page CSS modernes. rem s'adapte à la taille de police racine de l'utilisateur - meilleur pour l'accessibilité que px fixe.
Comment convertir px en rem
1. Entrez la valeur en pixels de votre conception (par exemple 32 px).
2. Définissez la taille de la police racine (16 px par défaut si elle est inchangée).
3. Copiez le résultat rem dans votre feuille de style.
4. Utilisez rem pour la taille des polices, l'espacement et l'échelle des composants ; px pour les bordures capillaires si nécessaire.
Exemples de Px à Rem
Corps et type de titre
16 px = 1 rem (par défaut). 24 px = 1,5 rem en-tête. 14 px = 0,875 rem petit texte.
Racine personnalisée 10 px (systèmes de conception)
Certaines équipes définissent html { font-size: 62,5% } donc 1 rem = 10 px. Ensuite, jeton de conception de 32 px = 3,2 rem.
Échelle d'espacement
Grille de 8 px → 0,5 rem à 16 px racine. Remplissage de 16 px = 1 rem ; rythme cohérent dans des gammes de type Tailwind.
Quand convertir px en rem
• Lorsque vous implémentez les spécifications Figma dans CSS réactif avec un zoom accessible.
• Lorsque vous vous alignez sur les jetons du système de conception définis dans rem.
• Lorsque les utilisateurs remplacent la taille de police par défaut du navigateur, les mises en page rem s'adaptent.
rem vs em dans le composant CSS
em est composé à l'intérieur d'éléments imbriqués avec différentes tailles de police - le remplissage en em augmente avec le texte local. rem reste lié à la racine, donnant un espacement prévisible entre les composants. De nombreuses équipes utilisent rem pour l'échelle de mise en page et em uniquement pour l'espacement des lettres ou les micro-ajustements liés au type local.
Questions fréquentes
Qu’est-ce que le rem ?
rem = "root em". 1 rem est égal à la taille de la police de l'élément HTML, pas du parent.
Pourquoi ne pas utiliser px partout ?
Le px fixe ignore les préférences de police de l'utilisateur. rem respecte la mise à l'échelle racine pour l'accessibilité (WCAG).
Taille de police racine par défaut ?
La plupart des navigateurs utilisent par défaut 16 px en HTML. Les utilisateurs peuvent modifier cela dans les paramètres.
Formule?
rem = px ÷ rootFontSizePx. Exemple : 20 px ÷ 16 = 1,25 rem.
Rem fonctionne-t-il pour les marges et le remplissage ?
Oui - rem s'applique à toute propriété de longueur CSS, pas seulement à la taille de la police.