Convertitore PX-EM
24 px corrispondono a 1,5 em quando il font dell'elemento genitore è di 16 px. Converta lunghezze CSS tra pixel ed em nei due sensi in base al font del genitore e ottenga un valore pronto da incollare per componenti annidati e spaziature accessibili. Gratis nel suo browser.
- Gratis
- Funziona nel suo browser
- Senza registrazione
- I suoi dati restano sul dispositivo
Esegui gratis nel browser
Esempio risolto
- Valore
- 24
- Genitore
- 16
- Unità di origine di 'value'
- px
- A
- em
- Risultato
- 1,5
- Etichetta di origine
- pixels
- Etichetta di destinazione
- em
- Risultato css
- 1.5em
Questo convertitore da px a em trasforma una lunghezza CSS dai pixel in unità em, o dagli em di nuovo in pixel, usando come base di riferimento la dimensione del font dell'elemento genitore in pixel. Le identità qui usate sono pienamente deterministiche: em è uguale a px diviso base, e px è uguale a em per base. Piccoli controlli che forse già conosce includono ventiquattro pixel in em con base sedici che danno uno virgola cinque, e zero virgola ottocentosettantacinque em in pixel con base sedici che danno quattordici. Il motore usa solo aritmetica finita, senza chiamate di rete, senza campionamento e senza scorciatoie dipendenti dalla data.
Dove si colloca la conversione px–em in design system, CSS e software
I design system spesso memorizzano i token di spaziatura e tipografia in pixel per gli strumenti di design, mentre il CSS di produzione preferisce l'em per i componenti annidati che dovrebbero scalare con la dimensione del font locale, quindi un unico convertitore deterministico previene la deriva da calcolatrice a mano quando un designer, un ingegnere frontend o uno studente riscrive un foglio di stile.
Gli audit di accessibilità convertono le spaziature fisse in pixel in em così che lo zoom del testo e le impostazioni utente dei font ingrandiscano i bersagli in modo proporzionale; i modelli di email e le skin legacy mescolano ancora lunghezze assolute e relative e necessitano di un rapido controllo offline prima di un rilascio.
Gli insegnanti assegnano compiti che richiedono una verifica veloce di un testo di corpo a sedici pixel e titoli a ventiquattro pixel senza fidarsi di app opache che passano silenziosamente al rem o eliminano la base. Gli sviluppatori invocano lo stesso contratto dagli script per seminare vettori di test deterministici per i generatori di temi, per normalizzare le dimensioni inserite dall'utente prima delle demo di ridimensionamento o per soddisfare enunciati di sfide di programmazione che esigono rapporti esatti anziché una stima approssimativa.
Gli strumenti di prodotto usano la riscrittura quando un discente o un agente digita ventiquattro pixel e una base di sedici pixel e la UI deve mostrare uno virgola cinque em accanto all'eco in pixel. La abbini ai convertitori di unità generali quando lo stesso modulo deve gestire anche lunghezza o dimensione dei dati, e tenga separati gli strumenti rem o viewport quando il riferimento è la radice della cascata o il viewport anziché la dimensione del font del genitore.
Casi d'uso
Token di design e scale tipografiche
Converta i token di tipo e spaziatura in pixel in em per componenti annidati che dovrebbero scalare con la dimensione del font del genitore.
Riscritture di fogli di stile e accessibilità
Riscriva spaziature e altezze di riga fisse in pixel in em così che lo zoom del testo ingrandisca il layout in modo proporzionale.
Domande frequenti
Quanto costa il convertitore da px a em?
È gratis nel suo browser su questa pagina.
Come sono legati px ed em?
Con una dimensione base del font del genitore in pixel, em = px / base e px = em * base. Un em equivale alla dimensione del font del genitore.
Cosa succede se la dimensione base del font è zero?
Una base pari a zero rende em = px/base indefinito (divisione per zero).
Questo strumento converte rem, percentuali o unità del viewport?
No. Converte solo tra px ed em data una dimensione esplicita del font del genitore in pixel. Usi strumenti dedicati per rem o altre unità CSS.
Perché i risultati sono arrotondati a una precisione?
La precisione predefinita è 10 decimali; può impostare precision da 0 a 15.
Strumenti correlati
Per sviluppatori — accesso via API
Tutto quello che vedi in questa pagina è disponibile anche via API. Questa sezione è per i team che vogliono integrarlo nei propri sistemi; chi non ne ha bisogno può semplicemente usare lo strumento qui sopra.
Endpoint
Autenticazione con Bearer token: un POST mette in coda l'attività e il risultato arriva via webhook o link firmato.
Chiamala dal tuo stack
curl -X POST https://api.kit.forhosting.com/conv/typography-px-em \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"value":16,"base":16,"from":"px","to":"em"}'const res = await fetch("https://api.kit.forhosting.com/conv/typography-px-em", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"value": 16,
"base": 16,
"from": "px",
"to": "em"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/conv/typography-px-em",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"value": 16,
"base": 16,
"from": "px",
"to": "em"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/conv/typography-px-em", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"value":16,"base":16,"from":"px","to":"em"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"value":16,"base":16,"from":"px","to":"em"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/conv/typography-px-em", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Esempio di richiesta
{
"value": 16,
"base": 16,
"from": "px",
"to": "em"
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "conv.typography_px_em",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L'API è asincrona: ricevi subito un task_id e puoi fare polling fino a 1 richiesta al secondo.
Prezzi
Prezzo pubblicato, senza token né crediti. Se l'attività fallisce, non paghi.
Limiti
max_abs_value | 1000000000000000 |
Errori
| HTTP | Codice | Significato |
|---|---|---|
401 | unauthorized | Chiave API mancante o non valida: controlla l'header Authorization. |
402 | insufficient_balance | Credito esaurito: ricarica per continuare a eseguire attività. |
404 | unknown_type | Tipo di attività sconosciuto: controlla il campo type della richiesta. |
429 | rate_limited | Troppe richieste in poco tempo: rallenta e riprova tra qualche secondo. |
Note tecniche
La tipografia relativa dipende da quella base: un em equivale alla dimensione del font calcolata del genitore, quindi sedici pixel con una base di sedici pixel fanno un em, e uno virgola cinque em con la stessa base fanno ventiquattro pixel.
Cosa significano px ed em e cosa contiene la risposta
Una conversione di lunghezza CSS tra pixel ed em risponde a una domanda di layout precisa: data una magnitudine in un'unità e una dimensione del font del genitore in pixel, qual è la magnitudine equivalente nell'altra unità affinché spaziature, scala tipografica e dimensioni dei componenti restino proporzionali quando la cascata cambia. I pixel sono lunghezze assolute indipendenti dal dispositivo in CSS; l'em è relativo alla dimensione del font calcolata dell'elemento genitore, quindi lo stesso valore in em si scala quando la dimensione del font del genitore cambia. Gli id canonici sono px per i pixel ed em per l'unità relativa em; grafie quotidiane come pixel, pixels ed ems si normalizzano a quegli id così moduli, query string e fogli di calcolo possono riutilizzare lo stesso contratto senza inventare enum privati. Questo calcolatore accetta un value numerico, una dimensione base del font in pixel, un'unità di partenza e un'unità di arrivo, poi restituisce il risultato convertito arrotondato a una precisione stabile, gli identificatori canonici from e to, etichette leggibili, un valore intermedio in pixel, una stringa compatta result_css come 1.5em e un breve promemoria di formula. Non c'è matematica del viewport, nessuna ricerca della radice rem e nessuna simulazione di media query: il motore moltiplica e divide per la base fornita entro l'intervallo di magnitudine supportato oppure rifiuta l'input con invalid_input. I casi rifiutati includono value, base, from o to mancanti; numeri non finiti; magnitudini oltre il tetto documentato; stringhe di unità sconosciute; e qualsiasi base pari a zero o numericamente zero, perché em uguale px su base dividerebbe per zero. Se le servono rem, percentuali, unità del viewport o una conversione generale multi-categoria, usi gli strumenti dedicati a quei domini; questa pagina risponde solo a px contro em con una nota dimensione del font del genitore e un output numerico stabile adatto a fogli di lavoro, test unitari e consumatori API che non devono inventare fattori.
Come si leggono value, base e unità e come i risultati restano riproducibili
La notazione scientifica opzionale nelle stringhe numeriche è ammessa quando viene interpretata come decimale finito; spazi incorporati, prefissi esadecimali e token non numerici vengono rifiutati con un messaggio chiaro, così una cella sbagliata non diventa una dimensione tipografica errata. I campi preferiti sono value per la magnitudine di lunghezza CSS, base per la dimensione del font del genitore in pixel, from per l'unità di partenza e to per l'unità di arrivo, con gli alias amount, length, n, quantity e size per il value; base_px, parent, parent_font_size, font_size e root per la base; unit, from_unit, source e input_unit per from; e target, to_unit, output_unit e into per to, così client eterogenei possono condividere un unico contratto. Lo zero è un value valido e restituisce semplicemente zero nell'unità di arrivo, ma una base pari a zero fallisce sempre con invalid_input perché la conversione relativa in em è indefinita senza una dimensione del font del genitore diversa da zero. Il calcolo passa attraverso i pixel: se from è em, moltiplichi value per base per ottenere i pixel; se to è em, dividi quella magnitudine in pixel per la base. Le richieste con la stessa unità restituiscono il value dopo aver validato la base, il che mantiene uniforme il contratto per i moduli che inviano sempre una dimensione del genitore. Abbini l'esecuzione gratuita nel browser di questa pagina all'API a pagamento quando le serve il medesimo risultato matematico dentro una pipeline automatizzata senza reimplementare la matematica tipografica da solo.
Dove si colloca la conversione px–em in design system, CSS e software
Su questa pagina il lavoro gira interamente nel suo browser; tramite l'API ogni ricerca riuscita costa $0.002, la validazione fallita non viene addebitata e nulla viene conservato dopo che la risposta ritorna. Quella suddivisione — esplorazione interattiva gratuita e un'API a pagamento identica — combacia con il resto del catalogo tier-A del KIT e le permette di passare da una demo in aula a una pipeline automatizzata senza cambiare il risultato matematico.
Casi di integrazione
Fixture CI deterministiche
Generi coppie px↔em riproducibili per generatori di temi, test unitari e pipeline di design system.