Convertisseur d'unités CSS
Convertissez localement les unités CSS une à une entre px, rem, em, %, vw, vh, vmin, vmax, pt, cm, mm, q, ex et ch avec des réglages de taille de police racine/parente, viewport, DPI et référence de pourcentage.
Pixels
px
Touchez pour changer d’unité
Unités de longueur
Typographie
Fenêtre d’affichage
Pourcentage
Relatif à la taille de police racine
rem
Touchez pour changer d’unité
Unités de longueur
Typographie
Fenêtre d’affichage
Pourcentage
Convertisseur d'unités CSSSaisissez une valeur et choisissez l'unité sourceChoisissez l'unité cible ou utilisez Échanger pour inverserRéglez le contexte rem/em/%/vw/vh si besoinCopiez le résultat convertiChangez les préréglages de viewport pour vérifier vw/vh
Démarrage rapide
1
2
3
4
5
Scénarios courants
Usages
mise en page responsive, passage design-dev, correspondance densité/impression, conventions de style unifiées
Conseils d'utilisation
Base : 16px à la racine est courant et facilite rem ↔ px
Texte en rem : favorise l'échelle globale et l'a11y ; em pour l'échelle locale des composants
Utilisez les unités de viewport pour les estimations de mise en page : combinez-les avec les breakpoints et des contraintes min/max pour éviter les extrêmes.
Décimales et arrondi : gardez une précision raisonnable pour la lisibilité
Paramètres et contexte
Base REM (Root Font Size) : détermine la conversion rem ↔ px. 16px est courant sur le Web (1rem≈16px). Ajustez-la quand la base du design est différente.
Base EM (Parent Font Size) : détermine em et % quand la référence est la taille de police. Utile pour l'échelle locale d'un composant.
Référence de % : choisissez Taille de police / Largeur / Hauteur selon le contexte. Mise en page : largeur/hauteur ; typographie : taille de police.
Préréglages de breakpoint : Mobile / Tablette / Bureau / Grand écran règlent aussi le viewport pour une estimation rapide. Ce n'est pas une media query à l'exécution.
Taille du viewport : utilisée pour vw/vh/vmin/vmax et % (largeur/hauteur). Les appareils réels varient avec les barres d'adresse, zones sûres et barres de défilement.
DPI (points par pouce) : utilisé pour les unités physiques pt/pc/in/cm/mm/q ↔ px. L'estimation CSS par défaut est 96 DPI ; les valeurs personnalisées sont des estimations d'impression/appareil, pas le calcul final de mise en page du navigateur.
Conseils : 1) 16px et 96 DPI sont des bases courantes ; 2) vérifiez les pourcentages de mise en page en changeant de breakpoint ; 3) ces réglages aident à l'estimation de design et ne remplacent pas le calcul DOM/CSS final du navigateur.
Limitations et compatibilité
La référence de % dépend de la propriété CSS, du bloc contenant et du mode de mise en page ; cet outil utilise la taille de police, la largeur du viewport ou la hauteur du viewport choisie pour l'estimation, pas une mesure réelle du parent/conteneur.
ex/ch sont ici des approximations basées sur la taille de police parente ; les résultats ne sont pas une inspection des métriques de police et varient selon les polices et navigateurs.
Les vw/vh/vmin/vmax classiques varient avec les barres de défilement, barres d'adresse et zones sûres ; cet outil ne calcule pas dvh/svh/lvh, vi/vb, safe-area ni les unités de requête de conteneur.
Les unités physiques ↔ px utilisent l'estimation DPI configurée ; les travaux d'impression ou HiDPI nécessitent toujours une validation sur appareil ou épreuve.
Confidentialité & sécurité
Le traitement s’effectue dans le navigateur. La valeur saisie, les unités From/To, les valeurs mises en cache par unité, la taille de police racine, la taille de police parente, le viewport, le DPI, la référence de pourcentage et le choix de breakpoint peuvent rester dans la session actuelle du navigateur ou dans le stockage du navigateur. Si vous enregistrez un espace de travail ou activez la synchronisation WebDAV, ces valeurs peuvent être enregistrées selon vos réglages de synchronisation. Les résultats convertis sont recalculés à partir de la valeur, des unités et des réglages de contexte actuels, et ne sont pas enregistrés comme résultats distincts. Cette page ne récupère aucune URL et n’envoie aucune valeur pour une conversion côté serveur. Sur un appareil partagé, effacez les valeurs, les réglages et les données du site si nécessaire.
FAQ
rem dépend de la racine (échelle globale prévisible) ; em dépend du parent (idéal pour l'échelle locale d'un composant).
Préférez rem pour la mise en page et le texte (a11y) ; px convient aux icônes et bordures nettes.
Les barres d'adresse mobiles, zones sûres et barres de défilement affectent le viewport ; combinez avec des breakpoints et des contraintes min/max.
Définissez le DPI (p. ex. 96/72/300). Ici, c'est une estimation ; validez avec profils ICC ou épreuves.