Convertisseur d'unités CSS

Référence

Unités CSS

CSS propose des unités absolues et relatives. Les unités absolues comme px sont fixes quel que soit le contexte. Les unités relatives comme rem, em et vw s'adaptent à une référence — essentielles pour des mises en page responsives et accessibles.

px, rem, em, vw

px (pixels) — unité absolue. 1px correspond à un pixel indépendant du périphérique. Utilisez-la pour les bordures, les ombres et les éléments qui ne doivent pas s'adapter à la taille de police.

rem (root em) — relatif à la taille de police de l'élément racine (html). La taille racine par défaut est 16px. Préféré pour les tailles de police et les espacements car il respecte les préférences de l'utilisateur.

em — relatif à la taille de police de l'élément parent. Peut se cumuler dans les éléments imbriqués. Utile pour les paddings et marges qui doivent s'adapter à la taille de police de l'élément.

vw (largeur du viewport) — 1vw = 1% de la largeur du viewport. Idéal pour la typographie fluide et les mises en page pleine largeur.

Conversions courantes px vers rem

Avec la base navigateur par défaut de 16px : 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem, 48px = 3rem. Pour les unités viewport sur un design de 1440px : 14.4px = 1vw, 72px = 5vw.

Pourquoi rem est préféré pour l'accessibilité

L'utilisation de rem pour les tailles de police respecte la préférence de taille de police du navigateur de l'utilisateur. Lorsqu'un utilisateur règle son navigateur sur 20px au lieu du 16px par défaut, les mises en page basées sur rem s'adaptent proportionnellement tandis que celles basées sur px restent fixes. WCAG 1.4.4 (Redimensionnement du texte) exige que le texte puisse être redimensionné jusqu'à 200% sans perte de contenu ou de fonctionnalité — les unités rem satisfont naturellement cette exigence.

Confidentialité

Toutes les conversions s'effectuent 100% dans votre navigateur. Aucune donnée n'est envoyée à un serveur.