Convertisseur PX ↔ REM ↔ EM ↔ PT
Convertissez les unités CSS dans les deux sens avec une taille racine configurable — px, rem, em et pt se mettent à jour ensemble.
535 vues
Comment les unités sont liées
rem = px ÷ taille racine (16 px par défaut, donc 24 px = 1.5rem) ; em fonctionne de la même façon mais par rapport à la taille de police héritée de l'élément — le champ « taille de contexte » du convertisseur ; pt est l'unité d'impression, 1pt = 1,333px (96dpi ÷ 72). Saisissez une valeur dans n'importe quel champ, les autres se mettent à jour.
Règle pratique : utilisez rem pour les tailles de police et les espacements afin que les préférences de taille de police de l'utilisateur redimensionnent la mise en page ; em pour les paddings qui doivent suivre le texte de leur composant ; px uniquement pour ce qui ne doit jamais changer d'échelle (bordures fines). Passer la racine à 10 px (l'ancienne astuce des 62,5 %) facilite le calcul mental mais est à éviter dans les nouveaux projets — les bibliothèques de composants supposent 16.
Questions fréquentes
Pourquoi ma valeur em diffère-t-elle de rem ?
em se multiplie par la taille de police la plus proche définie, et s'imbrique : un 1.5em dans un élément 1.5em vaut 2,25× la racine. rem se réfère toujours à la racine — c'est cette prévisibilité qui l'a fait gagner.
1pt vaut-il vraiment 1,333px ?
En CSS, oui par définition : 1in = 96px = 72pt. Les PDF d'impression et le CSS s'accordent sur ce ratio, même si la taille physique dépend du DPI réel de l'écran.
Outils similaires
Signaler un problème
Convertisseur PX ↔ REM ↔ EM ↔ PT