ForHosting KIT · Texte et IA

Convertisseur de pixels en pourcentage pour police CSS

Transformez une taille de police en pixels en pourcentage de son parent : un enfant de 18 pixels dans un parent de 16 pixels devient 112,5 %, prêt à coller dans votre feuille de style. Vous choisissez le nombre de décimales. Gratuit dans votre navigateur.

Gratuit
Fonctionne dans votre navigateur
Sans inscription
Vos données restent sur votre appareil

Lancer gratuitement Voir l’API

Utilisez-le depuis WebAPIE-mailTelegramApp bientôt

Exemple résolu

Si vous saisissez

Taille du pixel: 18
Taille du parent: 16
Précision: 2

Vous obtenez

Pourcentage: 112,5
Valeur CSS: 112.5%

Il vous permet de remplacer une typographie fixe par des tailles héritées, de reproduire une maquette existante sans modifier son échelle visuelle ou de documenter la relation entre un texte imbriqué et son contexte.

Convertissez précisément une maquette existante en pixels

Commencez par la taille de police que vous souhaitez reproduire et la taille calculée de l’élément qui deviendra son parent. Vous pouvez coller directement la valeur CSS obtenue dans une déclaration font-size. La mesure du parent est essentielle, car un pourcentage ne décrit pas une dimension physique absolue, mais une relation dans la chaîne d’héritage.

Utilisez la taille réelle de la police du parent immédiat, et non une valeur racine ou body sans rapport, sauf si cet élément est bien le parent dont l’enfant hérite la taille calculée. La précision détermine le nombre de décimales conservées afin de concilier fidélité à la maquette et lisibilité de la feuille de style. Les résultats entiers restent compacts, sans zéros finaux inutiles.

Comprenez le fonctionnement des pourcentages de police en CSS

Une taille de police exprimée en pourcentage est calculée par rapport à la taille de police calculée de l’élément parent. 100 pour cent signifie la même taille que le parent, 50 pour cent sa moitié et 150 pour cent une fois et demie cette taille. La typographie réagit ainsi naturellement aux changements hérités, mais les niveaux imbriqués peuvent aussi cumuler leurs rapports.

Si un conteneur vaut 125 pour cent et qu’un enfant à l’intérieur vaut également 125 pour cent, cet enfant atteint 156.25 pour cent de la taille située en dehors des deux niveaux. Le convertisseur traite une seule relation à la fois : indiquez donc toujours la taille du parent au niveau précis où la nouvelle déclaration sera placée. Pour font-size, les pourcentages et les unités em expriment le même rapport au parent, mais leur syntaxe et les conventions des systèmes graphiques diffèrent.

Cet outil produit précisément une syntaxe en pourcentage, souvent plus immédiatement lisible lors de la révision d’une feuille de style ou de la conversion de spécifications en pixels en règles CSS héritées.

Employez le résultat sans risque dans un système typographique

Considérez la valeur convertie comme un point de départ fidèle, puis testez-la dans la mise en page réelle. Le zoom du navigateur, les préférences de l’utilisateur, les polices de substitution, l’interligne et la largeur disponible peuvent modifier l’apparence du texte même si sa taille mathématique est correcte. Les pourcentages conviennent particulièrement aux composants qui doivent suivre l’échelle du texte environnant, notamment les légendes, badges, libellés de navigation et titres imbriqués.

Ils sont moins adaptés lorsque des imbrications répétées rendent l’échelle finale difficile à prévoir. Dans ce cas, une unité relative à la racine ou un jeton de conception sera parfois plus facile à maintenir. Conservez assez de décimales pour éviter une dérive visible, sans garder des chiffres dépourvus de sens issus de mesures approximatives.

Le calculateur refuse un parent nul ou négatif, car aucun pourcentage CSS utile ne peut en être tiré, ainsi qu’une taille d’enfant négative, interdite en CSS. La formule et les entrées normalisées facilitent l’audit des conversions automatisées avant l’ajout des déclarations générées à une feuille de style.

Cas d’usage

Intégrez une maquette graphique

Transformez les mesures en pixels d’un fichier de conception en valeurs CSS héritées du conteneur du composant.

Documentez l’échelle des composants

Exprimez légendes, libellés et titres sous forme de rapports clairs avec le texte du parent immédiat.

Questions fréquentes

Quelle valeur faut-il utiliser comme taille du parent ?

Utilisez la taille de police calculée du parent immédiat auquel la déclaration en pourcentage fera référence.

100 pour cent correspond-il toujours à 16 pixels ?

Non. 100 pour cent correspond à la taille de police du parent, quelle que soit sa valeur calculée.

Les pourcentages de police équivalent-ils aux unités em ?

Pour la propriété font-size, les deux expriment un rapport au parent, mais ce convertisseur produit une syntaxe en pourcentage.

Pourquoi un texte imbriqué devient-il plus grand que prévu ?

Parce que les pourcentages se multiplient en s'imbriquant. Un conteneur à 125 % qui contient un enfant lui aussi à 125 % place cet enfant à 156,25 % de la taille extérieure : prenez toujours la taille du parent au niveau exact de la nouvelle règle.

Comment le pourcentage est-il calculé ?

La taille en pixels est divisée par la taille du parent, puis multipliée par cent. Ainsi, 18 pixels dans un parent de 16 pixels donnent 112,5 %, et un parent de même taille que l'enfant donne exactement 100 %.

Outils associés

Pour les développeurs — accès API

Tout sur cette page est disponible par programmation. Cette section s'adresse aux équipes qui veulent l'intégrer à leurs systèmes ; les autres peuvent simplement utiliser l'outil ci-dessus.

Endpoint

POSThttps://api.kit.forhosting.com/str/px-to-percent

Authentification par jeton Bearer : un seul POST met la tâche en file d’attente, et le résultat vous parvient par webhook ou lien signé.

Appeler depuis votre stack

curl -X POST https://api.kit.forhosting.com/str/px-to-percent \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"pixel_size":18,"parent_size":16}'

const res = await fetch("https://api.kit.forhosting.com/str/px-to-percent", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "pixel_size": 18,
    "parent_size": 16
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/str/px-to-percent",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "pixel_size": 18,
    "parent_size": 16
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/str/px-to-percent", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"pixel_size":18,"parent_size":16}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"pixel_size":18,"parent_size":16}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/str/px-to-percent", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

Exemple de requête

{
  "pixel_size": 18,
  "parent_size": 16
}

Exemple de réponse

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "str.px_to_percent",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

L’API est asynchrone : chaque appel renvoie un task_id immédiatement, puis vous interrogez l’état à raison d’une requête par seconde.

Tarifs

par requête$0.002

Le prix est publié, sans tokens ni crédits. Une tâche qui échoue n’est pas facturée.

Erreurs

HTTP	Code	Signification
`401`	`unauthorized`	Clé API absente ou invalide : vérifiez l’en-tête Authorization.
`402`	`insufficient_balance`	Solde insuffisant : rechargez votre compte pour lancer cette tâche.
`404`	`unknown_type`	Type de tâche inconnu : vérifiez le champ type de votre requête.
`429`	`rate_limited`	Trop de requêtes : ralentissez la cadence, puis réessayez.

Notes techniques

Le convertisseur de pixels en pourcentage transforme une taille de police fixe en pourcentage fondé sur la taille de police de son élément parent. Saisissez la taille souhaitée en pixels et celle du parent : le calculateur renvoie le pourcentage numérique ainsi qu’une valeur CSS prête à l’emploi.

Convertissez précisément une maquette existante en pixels

Le convertisseur divise la taille en pixels par celle du parent, puis multiplie ce rapport par 100. Par exemple, un enfant de 18 pixels placé dans un parent de 16 pixels correspond à 112.5 pour cent. Si le parent passe ensuite de 16 pixels à 20 pixels, un enfant déclaré à 112.5 pour cent grandira avec lui.

Cas d'intégration

Modernisez une feuille de style fixe

Remplacez les tailles de police en pixels par des pourcentages relatifs au parent sans modifier le rendu actuel.

Questions techniques

Quelle formule le convertisseur emploie-t-il ?

Il divise la taille en pixels par celle du parent, puis multiplie le résultat par 100.

Combien coûte une requête API ?

Chaque requête API coûte $0.002 ; le calculateur peut également fonctionner dans le navigateur.

Consulter la documentation complète du KIT →

Lancer gratuitement

Exemple résolu

Convertissez précisément une maquette existante en pixels

Comprenez le fonctionnement des pourcentages de police en CSS

Employez le résultat sans risque dans un système typographique

Cas d’usage

Intégrez une maquette graphique

Documentez l’échelle des composants

Questions fréquentes

Outils associés

Pour les développeurs — accès API

Endpoint

Appeler depuis votre stack

Exemple de requête

Exemple de réponse

Tarifs

Erreurs

Notes techniques

Convertissez précisément une maquette existante en pixels

Cas d'intégration

Modernisez une feuille de style fixe

Questions techniques

merci