Convertisseur d'Unités CSS - Outil en ligne gratuit

Fonctionnalités

Taille de police racine réglable

px ↔ rem ↔ em ↔ pt

Génère l'extrait CSS prêt à l'emploi

Comment Utiliser

1. Définissez la taille de police racine (16px par défaut).

2. Saisissez une valeur dans n'importe quel champ d'unité.

3. Toutes les autres unités se mettent à jour automatiquement.

À propos de cet outil

Les pixels sont faciles à appréhender, mais les unités rem suivent la taille de police préférée de l'utilisateur, ce qui compte pour l'accessibilité. Ce convertisseur synchronise px, rem, em et pt à partir d'une taille de police racine de votre choix — 16px par défaut, la norme des navigateurs. Saisissez une valeur dans n'importe quel champ et les autres se mettent à jour : vous pouvez ainsi traduire en rem une maquette livrée en pixels, ou vérifier à quoi correspond à l'écran une taille d'impression de 12pt. La conversion suppose que em se mesure par rapport à la même taille de base que rem, ce qui est vrai pour les éléments dont le parent utilise la taille de police racine ; les composants imbriqués ayant leur propre taille de police donneront d'autres valeurs.

Questions Fréquentes

Quelle est la différence entre rem et em ?

rem est relatif à la taille de police de l'élément racine : 1rem vaut donc la même chose partout sur la page. em est relatif à la taille de police du parent de l'élément, et se cumule donc dans les éléments imbriqués. Ce convertisseur traite em comme relatif à la taille racine que vous saisissez.

Pourquoi utiliser rem plutôt que px pour les tailles de police ?

Si un visiteur augmente la taille de police par défaut dans les réglages de son navigateur, le texte en rem grandit avec elle, alors que le texte en px ignore cette préférence. Utiliser rem pour la typographie et les espacements rend un site plus confortable pour les personnes malvoyantes.

Comment les points sont-ils convertis en pixels ?

Le CSS définit 1 pouce comme valant 96px et 72pt : 1pt équivaut donc à 4/3 px (environ 1,333px). Une police de 12pt fait par conséquent 16px.

Dois-je régler la taille de police racine à 62.5% ?

html { font-size: 62.5% } fait valoir 1rem 10px, ce qui simplifie les calculs mais réduit le texte par défaut et oblige à compenser partout. Beaucoup d'équipes gardent aujourd'hui les 16px par défaut et utilisent plutôt un convertisseur comme celui-ci.

1px en CSS correspond-il à un pixel physique de l'écran ?

Pas sur les écrans haute densité. Un pixel CSS est une unité de référence ; sur un appareil dont le rapport de pixels vaut 2, un pixel CSS est dessiné avec deux pixels physiques dans chaque direction.