Convertisseur d'unités CSS (px, rem, em, vw, pt…)
Convertissez des longueurs CSS entre px, rem, em, %, vw, vh, vmin, vmax, pt, pc, in, cm, mm et Q avec votre propre taille de police racine et votre viewport. Gratuit.
1remLes unités absolues suivent CSS : 1in = 96px = 2,54cm = 72pt = 6pc, 1Q = 0,25mm. rem dépend de la taille de police racine ; em et % de celle du parent (comme pour font-size) ; vw/vh/vmin/vmax du viewport. Résultats arrondis à 4 décimales.
Qu'est-ce que Convertisseur d'unités CSS ?
Convertit une longueur CSS entre unités absolues (px, pt, pc, in, cm, mm, Q) et unités relatives (rem, em, %, vw, vh, vmin, vmax). Définissez la taille de police racine, la taille de police du parent et la taille du viewport pour que les unités relatives soient calculées selon votre contexte réel ; toutes les unités s'affichent en même temps.
Comment utiliser Convertisseur d'unités CSS
- Saisissez la Valeur et choisissez les unités De et Vers.
- Ajustez Taille de police racine (px, pour rem), Taille de police du parent (px, pour em et %) ainsi que la largeur et la hauteur du viewport.
- Copiez le résultat principal ou cliquez sur n'importe quelle carte d'unité pour copier cette valeur.
Exemple
24px (root 16px)
1.5rem · 18pt · 1.25vw (1920px viewport)
Quand utiliser Convertisseur d'unités CSS
Utilisez-le pour transformer des spécifications de design en px en CSS basé sur rem, ou pour vérifier ce que signifie une valeur vw sur un écran donné. % n'équivaut à em que pour font-size ; pour width ou padding, % se rapporte au bloc conteneur, que cet outil ne peut pas connaître.
Comment fonctionne Convertisseur d'unités CSS
Tout est converti via les pixels CSS. Les unités absolues utilisent les rapports CSS fixes : 1in = 96px = 2,54cm = 25,4mm = 72pt = 6pc, 1Q = 0,25mm. rem multiplie par la taille de police racine, em par celle du parent, % est un pourcentage de la taille de police du parent (interprétation font-size), vw/vh valent 1 % de la largeur/hauteur du viewport et vmin/vmax utilisent le plus petit/grand côté. Les résultats sont arrondis à 4 décimales.
Cas d'utilisation courants
- Convertir les tailles en px d'un design system en rem
- Vérifier la taille de 5vw sur un portable large de 1440px
- Transformer des tailles d'impression en pt ou mm en px CSS
- Calculer des valeurs em pour un composant dont la police parente fait 20px
Questions Fréquentes
Pourquoi 1rem vaut-il 16px ?
Les navigateurs fixent par défaut la taille de police racine à 16px. Si votre CSS définit html { font-size: 62.5% }, saisissez 10 comme taille de police racine.
Quelle différence entre rem et em ?
rem est relatif à la taille de police racine (html) ; em est relatif à la taille de police de l'élément parent, et se cumule donc en cas d'imbrication.
Les cm et in correspondent-ils à des tailles physiques à l'écran ?
Non. CSS fixe 1in = 96px : sur la plupart des écrans, un centimètre CSS n'est donc pas exactement un vrai centimètre. Ils sont exacts à l'impression.