Convertisseur pixels vers REM — outil gratuit
Convertissez entre px, rem, em, pt, vw, vh et % avec une taille de police de base configurable. Comprend un tableau de référence pour les tailles de pixels courantes.
Contexte (affecte rem/em/vw/vh/%)
Tokens Tailwind les plus proches (à 16px racine)
Tailles px courantes → rem (base 16px)
Convertir le CSS collé
Utilisations courantes
- PX vers REM pour le développement WebConvertissez les valeurs en pixels en unités rem pour un CSS évolutif et accessible. Définissez votre taille de police de base et voyez instantanément toutes les valeurs équivalentes.
- Unités CSS pour la conception réactiveConvertissez entre px, vw, vh et % pour créer des mises en page qui réagissent correctement à différentes tailles et orientations d'écran.
- Convertir les spécifications de conception en unités CSSTraduisez les valeurs en pixels de Figma ou Sketch en unités rem/em pour une implémentation CSS propre et évolutive.
- Référence des unités Tailwind CSSComprenez comment les classes de dimensionnement Tailwind CSS cartographient les valeurs en pixels et rem pour une implémentation précise.
- Convertir les unités CSS pour les feuilles de style d'impressionConvertissez entre px, pt et rem pour les requêtes multimédias d'impression et la sortie CSS PDF.
Comment ça marche
Toutes les conversions s'exécutent entièrement dans votre navigateur avec un moteur arithmétique écrit à la main sans dépendance. L'outil convertit entre sept unités CSS (px, rem, em, pt, vw, vh, et %) en faisant passer chaque calcul par les pixels comme base commune, en appliquant une simple division ou multiplication par rapport à votre taille de police racine configurée, la taille de police parente, ou les dimensions du viewport.
- 1Définissez vos valeurs de contexteAvant de convertir, vous configurez les quatre nombres qui donnent un sens aux unités CSS relatives : taille de police racine (16px par défaut, valeur par défaut du navigateur), taille de police de l'élément parent (pour les conversions em et %), et largeur et hauteur du viewport (pour vw et vh). Ce sont les mêmes valeurs que votre navigateur utiliserait pour résoudre le CSS à l'exécution.
- 2Le pixel comme intermédiaire universelLe convertisseur appelle d'abord toPixels() pour normaliser votre saisie en un nombre de pixels brut — par exemple, 1,5rem devient 1,5 × taillePoliceBasePx, et 50vw devient 0,5 × largeurViewport. Puis fromPixels() divise ce nombre de pixels par le facteur approprié pour l'unité cible. Les sept unités sont affichées simultanément dans le tableau de conversion.
- 3Recherche du jeton Tailwind le plus procheAprès conversion, l'outil calcule la valeur rem et parcourt deux tables de correspondance codées en dur — les treize jetons de taille de police de Tailwind (text-xs à text-9xl) et son échelle d'espacement — trouvant la correspondance la plus proche par distance absolue. Un signe = signifie que la valeur est un jeton exact ; ≈ signifie que c'est l'approximation la plus proche.
- 4Réécriture CSS par lot via expression régulièreLe panneau coller-CSS accepte du texte CSS brut et applique une substitution par expression régulière : en mode px→rem, elle fait correspondre chaque jeton px et remplace la partie numérique par valeur/taillePoliceBasePx + rem ; en mode rem→px, elle fait l'inverse. Le nombre de substitutions est affiché afin que vous puissiez vérifier combien de valeurs ont été réécrites.
Outils associés
Convertisseur d'unités
Convertissez entre les unités de longueur, poids, température, surface, volume et plus.
Générateur CSS clamp()
Générez une valeur CSS clamp() fluide pour la typographie et l'espacement adaptatifs. Définissez les tailles min/max et la plage de viewport, consultez un aperçu en direct et copiez le CSS en une ligne.
Générateur CSS Grid
Concevez visuellement une grille CSS — pistes, unités et espacements — et copiez le CSS et le HTML générés.