Convertisseur PX vers PT

Apercu de l'outil : Convertisseur PX vers PT

Le Convertisseur PX vers PT est un outil professionnel pour convertir entre pixels (PX) et points (PT), supportant des paramètres DPI personnalisés pour le design web, design d'impression, design UI et divers autres scénarios.

Qu'est-ce que Convertisseur PX vers PT ?

Convertisseur PX vers PT convertit PX en PT et génère un résultat prêt à l'emploi.

Comment l'utiliser

1. Collez le contenu PX ou saisissez des paramètres.
2. Choisissez PT en sortie et ajustez les options.
3. Vérifiez le résultat puis copiez ou téléchargez.

Cas d'usage courants

• Migration de format PX↔PT
• Utiliser des données PX dans des workflows PT ou la génération de code
• Valider la conversion par rapport aux spécifications

❓ FAQ

Q1 : Pourquoi le résultat est incorrect ?
R : Vérifiez le format d'entrée et les options, puis essayez l'exemple s'il existe.

Q2 : Et si l'entrée est très grande ?
R : Découpez les données en plus petits blocs pour plus de stabilité.

Q3 : Comment sauvegarder la sortie ?
R : Utilisez les boutons de copie ou de téléchargement si l'outil les propose.

✨ Fonctionnalités Principales

• 🔄 Conversion Bidirectionnelle : Supporte la conversion PX vers PT et PT vers PX
• 🎛️ Paramètres DPI : Supporte les valeurs DPI communes (72, 96, 150, 300) et DPI personnalisé
• 📊 Calcul en Temps Réel : Affiche les résultats de conversion instantanément lors de la saisie
• 📋 Copie en Un Clic : Copie rapide des résultats de conversion avec suffixes d'unité
• 🔄 Échange de Valeurs : Échange en un clic entre les valeurs PX et PT
• 📈 Tableau de Conversion : Fournit un tableau de référence de conversion pour les valeurs communes
• 📐 Explication des Formules : Affiche les formules de conversion et les paramètres DPI actuels

📖 Formules de Conversion

PX vers PT

PT = PX × 72 ÷ DPI

PT vers PX

PX = PT × DPI ÷ 72

Où :

• PX : Unité de pixel, unité de base pour l'affichage à l'écran
• PT : Unité de point, unité standard dans l'industrie de l'imprimerie
• DPI : Points Par Pouce (Dots Per Inch)

🎯 Cas d'Usage

1. Design Web

Convertir les unités PT des maquettes de design en unités PX pour CSS dans le design responsive :

/* Taille de police de maquette de design : 12pt */
/* Convertir en PX à 96 DPI */
font-size: 16px; /* 12pt × 96 ÷ 72 = 16px */

/* Hauteur de ligne de maquette de design : 18pt */
line-height: 24px; /* 18pt × 96 ÷ 72 = 24px */

2. Design d'Impression

Convertir les unités PX web en unités PT d'impression :

/* Titre web : 24px */
/* Convertir en unité d'impression 300 DPI */
/* 24px × 72 ÷ 300 = 5.76pt */

/* Texte du corps web : 16px */
/* Convertir en unité d'impression 300 DPI */
/* 16px × 72 ÷ 300 = 3.84pt */

3. Système de Design UI

Établir des spécifications de design unifiées :

// Conversion de taille de police dans le système de design
const fontSizes = {
  // Basé sur police de base 12pt, 96 DPI
  small: '12px',    // 9pt
  base: '16px',     // 12pt
  large: '20px',    // 15pt
  xlarge: '24px',   // 18pt
  xxlarge: '32px'   // 24pt
}

// Fonctions de conversion DPI
function ptToPx(pt, dpi = 96) {
  return Math.round(pt * dpi / 72)
}

function pxToPt(px, dpi = 96) {
  return Math.round(px * 72 / dpi * 100) / 100
}

📱 Explications des DPI Communs

72 DPI

• Usage : Standard traditionnel de moniteur Mac
• Caractéristique : 1pt = 1px, conversion la plus simple
• Application : Design Mac précoce, documents PDF

96 DPI

• Usage : DPI par défaut du système Windows
• Caractéristique : Standard de développement web moderne
• Application : Design web, applications Windows

150 DPI

• Usage : Écrans haute résolution
• Caractéristique : Rapport d'échelle 1.5x
• Application : Moniteurs HD, appareils mobiles

300 DPI

• Usage : Standard de l'industrie de l'imprimerie
• Caractéristique : Sortie d'impression haute qualité
• Application : Livres, magazines, impression d'affiches

🔧 Exemples d'Application Pratique

Design de Police Responsive

/* Système de police de base */
:root {
  /* Basé sur 16px = 12pt (96 DPI) */
  --font-size-xs: 12px;   /* 9pt */
  --font-size-sm: 14px;   /* 10.5pt */
  --font-size-base: 16px; /* 12pt */
  --font-size-lg: 18px;   /* 13.5pt */
  --font-size-xl: 20px;   /* 15pt */
  --font-size-2xl: 24px;  /* 18pt */
  --font-size-3xl: 30px;  /* 22.5pt */
}

/* Styles d'impression */
@media print {
  :root {
    /* Convertir en unités d'impression 300 DPI */
    --font-size-xs: 2.88pt;   /* 12px */
    --font-size-sm: 3.36pt;   /* 14px */
    --font-size-base: 3.84pt; /* 16px */
    --font-size-lg: 4.32pt;   /* 18px */
    --font-size-xl: 4.8pt;    /* 20px */
    --font-size-2xl: 5.76pt;  /* 24px */
    --font-size-3xl: 7.2pt;   /* 30px */
  }
}

Outil de Conversion de Maquette de Design

class DesignConverter {
  constructor(designDPI = 72, targetDPI = 96) {
    this.designDPI = designDPI
    this.targetDPI = targetDPI
  }

  // PT de design vers PX de développement
  ptToPx(pt) {
    return Math.round(pt * this.targetDPI / 72)
  }

  // PX de développement vers PT de design
  pxToPt(px) {
    return Math.round(px * 72 / this.targetDPI * 100) / 100
  }

  // Conversion par lots des spécifications de design
  convertDesignSpec(spec) {
    const converted = {}
    for (const [key, value] of Object.entries(spec)) {
      if (typeof value === 'number') {
        converted[key] = this.ptToPx(value)
      } else if (typeof value === 'object') {
        converted[key] = this.convertDesignSpec(value)
      } else {
        converted[key] = value
      }
    }
    return converted
  }
}

// Exemple d'utilisation
const converter = new DesignConverter(72, 96)

const designSpec = {
  typography: {
    h1: 24,      // 24pt
    h2: 20,      // 20pt
    body: 14,    // 14pt
    caption: 12  // 12pt
  },
  spacing: {
    xs: 4,       // 4pt
    sm: 8,       // 8pt
    md: 16,      // 16pt
    lg: 24,      // 24pt
    xl: 32       // 32pt
  }
}

const cssSpec = converter.convertDesignSpec(designSpec)
console.log(cssSpec)
// Sortie :
// {
//   typography: { h1: 32, h2: 27, body: 19, caption: 16 },
//   spacing: { xs: 5, sm: 11, md: 21, lg: 32, xl: 43 }
// }

💡 Conseils d'Utilisation

1. Conversion Précise

• Utiliser une précision de 4 décimales pour une conversion précise
• Considérer les effets d'arrondi sur l'apparence visuelle
• Ajuster manuellement les dimensions critiques

2. Cohérence du Design

• Établir un système d'unités de base (ex. grille 8px)
• Utiliser des relations multiplicatrices pour maintenir l'harmonie proportionnelle
• Tester les effets visuels sur différents DPI

3. Optimisation des Performances

• Pré-calculer les valeurs de conversion communes
• Utiliser des variables CSS pour gérer les dimensions uniformément
• Éviter les calculs fréquents à l'exécution

⚠️ Notes Importantes

1. Sélection DPI : Choisir la valeur DPI correcte basée sur la plateforme cible
2. Gestion de la Précision : Être attentif aux différences visuelles causées par la précision en virgule flottante
3. Compatibilité : Différents navigateurs peuvent gérer les valeurs sous-pixel différemment
4. Expérience Utilisateur : S'assurer que les dimensions converties s'affichent correctement sur les appareils cibles

🔗 Outils Connexes

• Convertisseur d'Unités CSS : Supporte la conversion d'em, rem, vh, vw et autres unités
• Outils de Design Responsive : Aident à concevoir des solutions d'adaptation multi-écran
• Calculateur de Taille de Police : Calcule les tailles de police optimales et les rapports de hauteur de ligne
• Générateur de Système de Grille : Crée des systèmes de grille basés sur les pixels

Avec le Convertisseur PX vers PT, vous pouvez facilement gérer les besoins de conversion d'unités dans différents environnements de design, assurant la cohérence et la précision du design.