01
Distinguer racine et parent
rem dépend de la police racine, em de la police parente fournie. vw et vh utilisent la largeur et la hauteur saisies, et non la fenêtre courante de cet onglet.
HTML / CSS / code frontend
convertisseur d'unités CSSDes mesures relatives avec leur contexte
Saisissez une longueur, puis passez à clamp, calc ou au rapport de forme.
convertisseur d'unités CSS
Entrée
Les valeurs sont calculées dans ce navigateur et ne sont pas envoyées.
Résultat
px
24pxrem
1.5remem
1.5emvw
1.6667vwvh
2.6667vhOptions
Calcul terminé.
Une maquette indique 24px, mais votre feuille de style emploie rem ou vw : le résultat dépend de la police racine ou du viewport. Ce convertisseur d'unités CSS demande aussi une taille de police parente pour em, au lieu de supposer que tous les em valent un rem.
Le calcul px en rem, la conversion vw vh et le calculateur CSS clamp sont regroupés ici. Le convertisseur d'unités CSS réutilise les mêmes références pour les expressions calc() compatibles, ce qui aide à comparer les chiffres avant de les intégrer.
Pourquoi utiliser ce convertisseur d'unités CSS ?
Les références de chaque unité restent lisibles.
Une longueur, cinq écritures
Le convertisseur d'unités CSS donne px, rem, em, vw et vh côte à côte. Modifiez seulement la racine : rem change ; modifiez seulement le parent : em change. Le résultat décrit les paramètres saisis, pas les styles calculés d'un autre site.
Une interpolation bornée et vérifiable
Les deux largeurs de viewport et les deux tailles désirées définissent la pente en vw. À 768px, l'aperçu montre la taille calculée et indique si la valeur se trouve dans la zone fluide ou sur une borne.
Contrôler les références avant de copier
02
Choisir le moment du calcul
En mode automatique, un changement est calculé après 350 ms. Désactivez-le pour utiliser Ctrl/Cmd+Entrée ; toute modification rend l'ancien résultat impossible à copier.
03
Vérifier les points intermédiaires
Dans clamp, testez une largeur entre les deux bornes. Dans le rapport de forme, comparez le rapport réduit avec la hauteur obtenue pour la largeur cible.
Quatre réponses à partir du même contexte
Table des cinq unités
Une longueur en px, rem, em, vw ou vh affiche ses cinq équivalents. Un nombre sans suffixe est interprété comme des px.
Génération de clamp()
Deux tailles à deux largeurs produisent une droite. Choisissez des bornes en rem ou en px et lisez la taille à la largeur de prévisualisation.
Évaluation limitée de calc()
Les cinq unités, les parenthèses et les opérations de base sont évaluées en px. On additionne les longueurs ; multiplication et division requièrent un nombre sans unité.
Rapport largeur-hauteur
Des dimensions entières sont réduites en fraction ; l'outil fournit aspect-ratio et la hauteur calculée pour une largeur cible.
Ce que les nombres ne peuvent pas deviner
- Les unités relatives exigent une base
- Le convertisseur d'unités CSS ne lit pas la cascade ni les styles calculés du site cible. Les valeurs rem, em, vw et vh dépendent des quatre paramètres déclarés ici.
- calc() reste un sous-ensemble
- Les pourcentages, var(), env(), les unités inconnues et les opérations entre dimensions incompatibles sont refusés. Sans contexte CSS réel, aucune valeur px fiable ne peut en être déduite.
- Les bornes de clamp doivent être cohérentes
- La première largeur doit être plus petite que la seconde et la taille minimale ne peut dépasser la maximale. Une taille négative interrompt la génération.
- Le rapport ne retouche aucune image
- Largeur, hauteur et largeur cible doivent être des entiers positifs. Le calcul fournit des dimensions et une déclaration CSS, sans découpe ni redimensionnement de fichier.
Questions sur le convertisseur d'unités CSS
Comment convertir des px en rem ?
Divisez les pixels par la taille de police racine. Avec une racine de 16px, 24px donnent 1,5rem ; changez cette base si votre projet utilise une autre valeur.
Quelle différence entre em et rem ?
rem suit la racine du document, em la police parente indiquée. Dans un composant imbriqué, em peut donc changer alors que rem reste stable.
De quoi dépend la conversion de vw et vh en px ?
vw dépend de la largeur du viewport et vh de sa hauteur ; chaque unité représente 1 %. Renseignez les deux dimensions pour obtenir des px.
Comment calculer une valeur CSS clamp() ?
Saisissez deux largeurs de viewport et les tailles voulues à chacune. Le calculateur déduit la pente en vw et montre un aperçu de la valeur clamp().
Faut-il utiliser px ou rem dans les bornes de clamp() ?
Pour du texte, des bornes en rem peuvent suivre la taille de police choisie par l'utilisateur ; des bornes en px restent fixes. Le mode de sortie vous laisse choisir.
Une autre question ?
Utiliser le convertisseur d'unités CSS
Revenez au calcul pour comparer une longueur, tester une expression ou produire une taille fluide bornée.