Convertitore da pixel a percentuale per caratteri CSS

Inserisca la dimensione desiderata in pixel e quella del genitore: il calcolatore restituisce sia la percentuale numerica sia un valore CSS pronto all’uso. È utile per sostituire una tipografia fissa con dimensioni ereditate, riprodurre un progetto esistente senza modificarne la scala visiva o documentare il rapporto tra testo annidato e contesto circostante.

Converta con precisione un progetto esistente in pixel

Parta dalla dimensione del carattere che desidera riprodurre e dalla dimensione calcolata dell’elemento che ne diventerà il genitore. Il convertitore divide la dimensione in pixel per quella del genitore e moltiplica il rapporto per 100. Per esempio, un figlio di 18 pixel dentro un genitore di 16 pixel diventa 112.5 per cento. Può incollare direttamente il valore CSS restituito in una dichiarazione font-size. La misura del genitore è importante perché le percentuali non descrivono una dimensione fisica assoluta, bensì un rapporto nella catena di ereditarietà. Se in seguito il genitore passa da 16 pixel a 20 pixel, un figlio dichiarato al 112.5 per cento crescerà insieme a esso. Usi la dimensione effettiva del carattere del genitore immediato, non un valore root o body estraneo, salvo che tale elemento sia davvero il genitore dal quale il figlio eredita la dimensione calcolata. La precisione stabilisce quante cifre decimali conservare, conciliando fedeltà al progetto e leggibilità del foglio di stile. I risultati interi restano compatti e non ricevono zeri finali superflui.

Comprenda il comportamento delle percentuali dei caratteri in CSS

Una dimensione del carattere in percentuale viene calcolata rispetto alla dimensione calcolata del carattere dell’elemento genitore. 100 per cento indica la stessa dimensione del genitore, 50 per cento la metà e 150 per cento una volta e mezza tale dimensione. Questo comportamento rende la tipografia naturalmente reattiva alle modifiche ereditate, ma l’annidamento può anche moltiplicare i rapporti. Se un contenitore è impostato al 125 per cento e anche un figlio al suo interno è al 125 per cento, il figlio raggiunge il 156.25 per cento della dimensione esterna a entrambi i livelli. Il convertitore calcola un rapporto alla volta; indichi quindi sempre la dimensione del genitore al livello esatto in cui verrà inserita la nuova dichiarazione. Per font-size, percentuali e unità em esprimono lo stesso rapporto rispetto al genitore, ma differiscono per sintassi e convenzioni nei sistemi di design. Questo strumento restituisce specificamente la sintassi percentuale, che rende i rapporti di scala immediatamente leggibili durante la revisione di un foglio di stile o la conversione di specifiche in pixel in regole CSS ereditate.

Usi il risultato in sicurezza in un sistema tipografico

Consideri il valore convertito un punto di partenza fedele, quindi lo verifichi nel layout reale. Lo zoom del browser, le preferenze dell’utente, i caratteri di riserva, l’interlinea e la larghezza disponibile possono influire sull’aspetto del testo anche quando la dimensione matematica è corretta. Le percentuali sono particolarmente utili per componenti che devono seguire la scala del testo circostante, come didascalie, badge, etichette di navigazione e titoli annidati. Possono essere meno adatte quando annidamenti ripetuti rendono difficile prevedere la scala finale. In tal caso, un’unità relativa alla radice o un token di design può essere più facile da mantenere. Conservi decimali sufficienti a evitare scostamenti visibili, ma elimini le cifre prive di significato provenienti da misure approssimative. Il calcolatore rifiuta un genitore nullo o negativo perché non è possibile ricavarne una percentuale CSS utile, e rifiuta dimensioni negative del figlio perché CSS non le consente. La formula e i valori normalizzati restituiti agevolano la verifica delle conversioni automatiche prima di inserire le dichiarazioni generate in un foglio di stile.