Pixel ↔ REM
Convertissez entre pixels et REM pour CSS
Comment utiliser Pixel ↔ REM
Convertissez entre pixels et REM pour CSS Outil gratuit en ligne, sans inscription, sans publicités intrusives. Utilisez maintenant.
Pourquoi les développeurs web convertissent-ils entre pixels et REM ?
La bonne pratique CSS moderne favorise les unités relatives (REM, EM) plutôt que les pixels absolus pour les tailles de police et les espacements. Cela garantit que les utilisateurs qui configurent une taille de police plus grande dans les préférences de leur navigateur voient le texte s'adapter proportionnellement — une exigence fondamentale d'accessibilité numérique, notamment pour les normes RGAA (Référentiel Général d'Amélioration de l'Accessibilité) en France.
- Taille de police : Plutôt que
font-size: 16px, utilisezfont-size: 1rem. Si la police de base du navigateur de l'utilisateur est 20px, tout s'adapte proportionnellement — garantissant une bonne expérience pour les utilisateurs malvoyants qui agrandissent la taille de police du système. - Espacement et padding : Les marges et le padding en REM s'adaptent aux préférences de police de l'utilisateur.
padding: 1.5remest plus accessible quepadding: 24px— et respecte les paramètres d'accessibilité de l'utilisateur. - Implémentation de systèmes de design : Les outils de design (Figma, Sketch) exportent les valeurs en pixels. Convertissez en REM avant d'écrire le CSS pour que le système de design soit accessible par défaut dès la conception.
- Media queries : Les media queries basées sur REM respectent les préférences de taille de police de l'utilisateur.
@media (min-width: 48rem)se déclenche à 768px pour une base de 16px, mais à une valeur de pixels plus haute pour les utilisateurs avec des polices plus grandes. - Bibliothèques de composants : Construire des composants réutilisables en REM garantit qu'ils se comportent de façon cohérente dans différents contextes de taille de police de base — important pour ceux qui créent des design systems partagés.
REM vs EM : REM (Root EM) est toujours relatif à la taille de police de l'élément racine (html) — cohérent et prévisible dans tout le document. EM est relatif à la taille de police de l'élément courant — peut s'accumuler de façon inattendue dans les éléments imbriqués. REM est préférable pour la grande majorité des cas d'usage.
Frequently Asked Questions
Quelle est la taille de police par défaut du navigateur ?
La valeur par défaut est 16px dans tous les navigateurs majeurs (Chrome, Firefox, Safari, Edge). Les utilisateurs peuvent la modifier dans les paramètres du navigateur — et c'est tout le but d'utiliser REM. 1rem = 16px par défaut, mais peut être 18px, 20px ou même 12px selon les préférences de l'utilisateur, notamment les personnes âgées ou malvoyantes.
Pourquoi certains développeurs utilisent-ils html { font-size: 62.5% } ?
Définir la taille de police racine à 62,5% de 16px = 10px facilite le calcul : 1,6rem = 16px, 2,4rem = 24px. C'est une astuce courante mais qui remplace la taille de police préférée de l'utilisateur, contredisant partiellement l'objectif d'accessibilité des REM. Une meilleure approche est d'utiliser calc() du CSS ou simplement de diviser par 16 les valeurs.
Quand utiliser PX plutôt que REM ?
Utilisez PX pour les bordures (les bordures de 1px doivent toujours rester 1px), les ombres et les éléments où la taille exacte en pixels compte indépendamment des préférences de police — comme une ligne de séparation fine. Utilisez REM pour les tailles de police, le padding, les marges et tout espacement qui doit s'adapter avec le texte pour une meilleure accessibilité.
Quelle est la différence entre REM, EM et PX ?
PX est une unité absolue — toujours la même taille quelles que soient les préférences. EM est relatif à la taille de police du parent — peut s'accumuler dans les éléments imbriqués. REM est relatif à la taille de police racine (html) — cohérent dans tout le document. Pour un design accessible, préférez REM sur PX pour les tailles de police et les espacements.
Comment convertir tout un design de pixels en REM ?
Divisez chaque valeur en pixels par la taille de police racine (par défaut : 16). Ainsi, 24px ÷ 16 = 1,5rem. Les fonctions Sass (px-to-rem()) ou les plugins PostCSS peuvent automatiser cette conversion dans toute une base de code. Des extensions VS Code existent également pour effectuer la conversion automatiquement à la saisie.
REM vs EM vs PX vs VW/VH vs pourcentages
PX est absolu — précis mais non adaptatif. REM s'adapte à la taille de police racine — meilleur pour la typographie et l'espacement accessible. EM s'adapte à la taille de police du parent — utile pour l'espacement au niveau du composant. VW/VH sont des pourcentages du viewport — utiles pour les mises en page fluides. Les pourcentages sont relatifs à l'élément parent — essentiels pour les largeurs responsives. Le CSS moderne combine : REM pour la typographie et les espacements, VW/VH pour la mise en page générale, et pourcentages pour les largeurs des colonnes.