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. La racine du navigateur par défaut est souvent de 16 px, donc 24 px = 1,5 rem à moins que le projet ne remplace html { font-size }.
Pixels
Root font size (px)
Result
1rem
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.
Quand choisir autre chose
• Lorsque vous en avez besoin par rapport à une police de composant imbriquée, utilisez des pixels pour les emboîter.
• Lorsque vous avez besoin d'unités de fenêtre (vw/vh) pour des mises en page plein écran.
• Lorsque vous faites correspondre les pixels de l'appareil 1:1 sur les bordures de la rétine, les bordures de 1 px restent souvent en px.
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.
Flux de travail de transfert de conception
Les concepteurs exportent des px depuis Figma ; les développeurs divisent par racine convenue (document dans README). Lorsque le projet utilise l'astuce de 62,5 %, confirmez avant la conversion : le mélange des hypothèses double ou divise par deux l'interface utilisateur.
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.
Les données sont-elles téléchargées ?
Non. La conversion fonctionne localement.