Conv. unités CSS

Convertir entre les unités CSS comme px, em, rem, %, vw, vh et plus avec support des points de rupture responsive

Instructions d'utilisation

🚀 Démarrage rapide

  • Saisir valeur et unité : ex. 16 + px ou 1 + rem
  • Configurer le contexte : taille de police racine/parent, dimensions du viewport et DPI (impacte rem/em/vw/vh/pt/cm, etc.)
  • Voir les résultats : les autres unités sont calculées instantanément et copiables
  • Points de rupture : basculer mobile/tablette/bureau pour valider sur différents écrans

📌 Scénarios courants

  • Usages : mise en page responsive, handoff design‑dev, corrélation densité/impression, conventions unifiées

🧭 Conseils d’utilisation

  • Base : 16px en racine est courant et facilite rem ↔ px
  • Texte en rem : favorise l'échelle globale et l'a11y ; em pour l'échelle locale des composants
  • Mise en page avec unités viewport : combiner avec points de rupture et clamp/min/max
  • Décimales & arrondi : garder une précision raisonnable pour la lisibilité

🎛️ Paramètres et contexte

  • REM base (Root Font Size): determines rem ↔ px conversion. 16px is common on the web (1rem≈16px). Adjust when the design baseline differs.
  • EM base (Parent Font Size): determines em and % (when reference is Font size). Useful for component‑local scaling.
  • % reference: choose Font size / Width / Height depending on context (layout vs typography).
  • Breakpoint presets: Mobile/Tablet/Desktop/Large also set viewport size for quick estimation (not a runtime media query).
  • Viewport size: used for vw/vh/vmin/vmax and % (width/height). Real devices vary with address bars/safe areas/scrollbars.
  • DPI (dots per inch): for pt/pc/in/cm/mm/q ↔ px. Web default 96; set device value for print/HiDPI.
  • Tips: 1) Use 16px & 96 DPI as common bases; 2) Validate layout % with breakpoints; 3) These are design‑time estimates, not the browser’s final CSS computation.

⚠️ Limites et compatibilité

  • % varie selon la propriété (width/height/line‑height diffèrent) ; l'outil estime les cas courants
  • ex/ch dépendent des métriques de police ; résultats variables selon polices/navigateurs
  • Les unités viewport varient avec barres/aires sûres ; de légers écarts sont possibles
  • Unités physiques ↔ px varient avec le DPI ; valider pour l'impression/HiDPI

🔒 Confidentialité & sécurité

  • Tous les traitements s’effectuent dans votre navigateur ; aucune donnée ne quitte votre appareil

❓ FAQ

Différence entre rem et em ?

rem dépend de la racine (échelle globale prévisible) ; em du parent (idéal en local composant)

Faut‑il utiliser px ou rem ?

Préférez rem pour mise en page/texte (a11y) ; px convient aux icônes/bordures nettes

Pourquoi vw/vh diffèrent selon l'appareil ?

Barres d'adresse/aires sûres/scroll affectent le viewport ; combinez avec clamp()/min()/max() et breakpoints

Convertir des pixels écran en unités d'impression ?

Définir le DPI (p. ex. 96/72/300). Ici, estimation ; validez avec profils ICC/épreuves

CSS Unit Converter - px em rem vw vh pt Calculator - CrateX.app