Convertisseur d’unités CSS

Convertisseur d’unités CSS - Calculateur px, rem, em, %

🎨 Convertissez entre les unités CSS : pixels (px), rem, em, pourcentages (%), points (pt) et unités de viewport (vw, vh). Outil essentiel pour le design et le développement web responsive.

Types d’unités CSS

• Unités absolues : px, pt, cm, mm, in - taille fixe quel que soit le contexte
• Unités relatives : rem, em, %, vw, vh - s’adaptent selon le parent ou le viewport
• Unités relatives à la police : rem, em, ch, ex - basées sur la taille de la police
• Unités relatives au viewport : vw, vh, vmin, vmax - basées sur les dimensions du viewport

Explications des unités

• px (pixels) : 1px = 1 pixel de l’appareil. Unité absolue, précise mais non scalable.
• rem : Relatif à l’élément racine (html). 1rem = 16px par défaut.
• em : Relatif à la taille de police du parent. Peut se cumuler dans les éléments imbriqués.
• % : Relatif à la propriété de l’élément parent. 100% = identique au parent.
• pt (points) : Unité d’impression. 1pt = 1/72 pouce ≈ 1,333px.
• vw : 1vw = 1% de la largeur du viewport. 100vw = pleine largeur.
• vh : 1vh = 1% de la hauteur du viewport. 100vh = pleine hauteur.

Conversions courantes

• 1rem = 16px (paramètre navigateur par défaut)
• 1em = 16px (si le parent est à 16px)
• 100% = taille de l’élément parent
• 12pt = 16px (courant en impression)
• 1vw = 19,2px (sur un viewport 1920px)

Méthode 62,5 %

Définissez html { font-size: 62.5%; } pour faire 1rem = 10px. Cela simplifie les calculs : 1.6rem = 16px, 2.4rem = 24px, etc.

Considérations d’accessibilité

• Utilisez rem pour les polices : respecte les préférences de taille de police de l’utilisateur
• Évitez px pour les polices : ne s’adapte pas aux réglages utilisateur
• Utilisez des unités relatives : rend les designs accessibles au zoom/agrandissement
• Testez avec différentes tailles : vérifiez à 200% de zoom et avec du texte plus grand

Design responsive

Utilisez rem pour les media queries : @media (min-width: 48rem) au lieu de 768px. Cela garantit que les breakpoints s’adaptent aux préférences de taille de police de l’utilisateur.

💡 Astuce pro : La bonne pratique moderne est d’utiliser rem pour la plupart des tailles (polices, espaces, breakpoints), px pour les bordures et les détails fins, et % ou les unités de viewport pour les layouts. Évitez em pour l’espacement, car il peut se cumuler de façon imprévisible.