Convertir entre les unités CSS : px, rem, em, vw, vh, pt, cm et plus
Un convertisseur d'unités CSS traduit une taille entre les unités que CSS utilise pour la mise en page — px, rem, em, vw, vh, pt, cm et plus — pour déplacer proprement une valeur d'une unité à une autre. CSS offre de nombreuses unités car elles répondent à des besoins différents : les pixels sont fixes et absolus, rem et em sont relatifs aux tailles de police pour une typographie évolutive, et vw et vh sont relatifs à la fenêtre pour des mises en page responsives. Convertir entre elles permet d'exprimer la même taille dans l'unité qu'une règle particulière doit utiliser.
Les conversions qui comptent le plus sont les relatives, car elles dépendent du contexte : un rem est des multiples de la taille de police racine (souvent 16px), un em est relatif à la taille de police de l'élément, et les unités de fenêtre sont des pourcentages de la fenêtre. Cette dépendance est précisément ce qui rend la conversion à la main source d'erreurs — 1,5rem ne fait 24px que si la racine est à 16px. Cet outil gère les tailles de base pour vous afin d'obtenir des valeurs exactes, vous aidant à bâtir des styles évolutifs et responsives au lieu de coder des pixels en dur partout. Il s'exécute dans votre navigateur.
Un pixel (px) est une unité fixe et absolue. Un rem est relatif à la taille de police de l'élément racine, il évolue donc de façon cohérente sur toute la page. Un em est relatif à la taille de police de l'élément courant, il peut donc se cumuler en imbrication. rem est généralement préféré pour un dimensionnement prévisible et évolutif.
Cela dépend de la taille de police racine. Par défaut les navigateurs utilisent 16px, donc 1rem vaut 16px et 1,5rem vaut 24px — mais si la taille de police racine change, chaque valeur rem change avec. Cette dépendance à la base explique pourquoi ce convertisseur demande ou suppose une taille racine.
Les unités de fenêtre (vw, vh) sont des pourcentages de la largeur et hauteur de la fenêtre, idéales donc pour des éléments qui doivent évoluer avec l'écran — sections pleine hauteur, texte d'en-tête fluide ou espacement responsive. Elles changent au redimensionnement de la fenêtre, contrairement aux valeurs px fixes.
Les unités relatives comme rem respectent les préférences de taille de police de l'utilisateur et évoluent harmonieusement entre appareils, ce qui améliore l'accessibilité et la réactivité. Coder des pixels en dur partout ignore ces réglages et rend les mises en page rigides, d'où l'intérêt fréquent de convertir en unités relatives.
Générateur d'ombre de boîte CSS · Générateur de rayon de bordure CSS · Générateur Flexbox · Générateur CSS Grid · Générateur d'ombre de texte CSS · Générateur d'animations CSS