Converti px, em, rem, pt e % con una dimensione base del font configurabile — tabella di equivalenza completa nel tuo browser.
I CSS misurano le lunghezze in diverse unità che sullo schermo finiscono tutte in pixel, e convertirle a mano è una seccatura quotidiana nel lavoro front-end. Questo convertitore prende un valore — in px, em, rem, pt o percentuale — e mostra la stessa lunghezza in tutte e cinque le unità contemporaneamente, usando una dimensione base del font che controlli tu. La base di default è 16 px, la dimensione iniziale del font in ogni browser principale, ma se il tuo design system imposta html { font-size: 62.5% } o qualsiasi altra dimensione radice, cambia la base e l'intera tabella si adatta.
Le relazioni sono lineari e lo strumento mostra le formule che applica: i valori em e rem vengono moltiplicati per la dimensione base del font per ottenere i pixel, i punti vengono convertiti al rapporto definito dai CSS di 96 px per 72 pt (quindi 1 pt = 1,333 px), e le percentuali sono lette rispetto alla base, esattamente come gli em. Un avvertimento onesto che lo strumento dichiara sullo schermo: em e rem producono qui risultati identici perché per entrambi viene usata una sola base. In una pagina reale differiscono — rem fa sempre riferimento all'elemento radice, mentre em fa riferimento alla dimensione del font dell'elemento corrente, che può a sua volta essere scalata dai suoi genitori.
Usi tipici: tradurre una consegna del designer in pixel nei valori rem su cui il tuo codice si standardizza, controllare a quanto corrisponde 0.875 rem prima di scrivere una media query, convertire dimensioni in pt orientate alla stampa di una guida di stile in unità per lo schermo, o impostare scale tipografiche accessibili che rispettino le impostazioni del browser dell'utente. La conversione gira al 100% nel tuo browser mentre digiti — nulla viene caricato e non c'è nulla da installare.
px = em × base; px = rem × base; px = pt × 96 ÷ 72; px = % ÷ 100 × base. Inverso: em = rem = px ÷ base; pt = px × 72 ÷ 96; % = px ÷ base × 100. Con la base di default di 16 px: 1.5 em = 24 px = 18 pt = 150%.
rem è sempre relativo alla dimensione del font della radice (html), mentre em è relativo alla dimensione del font dell'elemento corrente, che si eredita e si compone lungo l'albero. Questo convertitore usa una sola base per entrambi, quindi qui i numeri coincidono; in elementi annidati possono divergere.
Perché ogni browser principale parte con una dimensione iniziale del font di 16 px, quindi 1 rem = 16 px su una pagina non modificata. Se il tuo CSS cambia la dimensione radice — il popolare trucco del 62.5% rende 1 rem = 10 px — imposta quel valore nel campo base.
Moltiplica per 72 e dividi per 96: i CSS fissano il rapporto a 96 px per pollice e 72 pt per pollice, quindi 16 px = 12 pt. L'unità pt conta soprattutto per i fogli di stile di stampa e i documenti.
rem è generalmente raccomandato per la tipografia perché si scala quando gli utenti cambiano la dimensione del font preferita nel browser, cosa che px ignora. px resta valido per ciò che non deve scalare con il testo, come bordi o ombre.
No. La conversione è una manciata di moltiplicazioni fatte in JavaScript sul tuo dispositivo — nulla viene inviato ad alcun server né salvato da nessuna parte.
Vai.la trasforma qualsiasi URL in un link breve con statistiche dei clic, QR Code e il tuo biolink personale.
Vai.la non è responsabile dell'uso degli strumenti né delle decisioni prese in base ai loro risultati.