Un convertitore da px a rem veloce e locale
Questo convertitore bidirezionale da px a rem semplifica la conversione delle misure statiche in pixel in unità relative accessibili e scalabili. Che tu stia trasformando un mockup grafico in codice o facendo il refactoring di un vecchio foglio di stile, puoi calcolare all'istante i valori CSS esatti di cui hai bisogno.
Ogni calcolo avviene all'istante mentre digiti. Poiché lo strumento viene eseguito interamente in locale nel tuo browser, non ci sono tempi di caricamento o ritardi di rete. Puoi convertire facilmente i pixel in rem, oppure invertire la direzione e convertire i rem in px, tutto senza staccare le mani dalla tastiera.
Perché convertire i pixel in rem?
Per anni, gli sviluppatori web hanno utilizzato i pixel (px) per qualsiasi cosa, dalle dimensioni dei font al padding. Tuttavia, i pixel sono unità assolute. Se un utente ipovedente modifica le impostazioni del browser per visualizzare il testo con una dimensione predefinita maggiore (ad esempio, 24px invece dei 16px standard), qualsiasi testo impostato in modo fisso in pixel ignorerà questa preferenza e rimarrà piccolo.
Utilizzando le unità rem (root em), l'intero layout rispetta le impostazioni dell'utente. Se l'utente aumenta la dimensione predefinita del font, la tipografia, i margini e i padding basati sui rem si adatteranno in modo proporzionale. Questo rende il tuo sito web molto più accessibile e responsivo. L'utilizzo di un calcolatore di rem CSS elimina ogni incertezza da questo processo, permettendoti di scrivere codice accessibile mantenendo le esatte dimensioni in pixel fornite dal tuo team di design.
Come funziona il calcolatore rem CSS
Il calcolo alla base della conversione è semplice, ma ripeterlo a mente può rallentare il flusso di lavoro. La formula per convertire i px in rem è:
Pixel desiderati ÷ Dimensione font di base = Valore in rem
Di default, quasi tutti i browser web usano una dimensione del font di base di 16px. Se vuoi che un titolo appaia di 32px su uno schermo standard, dividi 32 per 16, ottenendo 2rem.
Se lavori su un codice esistente e devi capire quanto sarà grande un'unità relativa, puoi usare il tool per convertire i rem in px. La formula semplicemente si inverte:
Valore in rem × Dimensione font di base = Valore in pixel
Questo calcolatore gestisce entrambe le direzioni contemporaneamente. Basta digitare in uno dei campi e l'altro si aggiornerà all'istante. Inoltre, arrotonda i decimali complessi a quattro cifre, mantenendo il tuo CSS pulito e leggibile senza sacrificare la precisione.
Lavorare con dimensioni del font di base personalizzate
Sebbene 16px sia lo standard web, alcuni progetti modificano la dimensione del font root. Una tecnica molto comune nei vecchi codici è il "trucco del 62.5%". Gli sviluppatori impostavano html { font-size: 62.5%; } nel CSS. Poiché il 62.5% dei 16px di default corrisponde esattamente a 10px, la dimensione del font di base diventa 10.
Con una base di 10, il calcolo diventa semplicissimo: 24px corrispondono a 2.4rem, 18px a 1.8rem e così via. Se lavori a un progetto che usa questa tecnica, o qualsiasi altra dimensione root personalizzata, ti basta modificare il campo Dimensione font di base nel calcolatore. Il tool accetta qualsiasi base compresa tra 1 e 100, ricalcolando all'istante i valori attuali e aggiornando l'intera tabella di riferimento.
Oltre la tipografia: spaziature e layout
Sebbene le unità rem siano note soprattutto per il font-size, sono altrettanto importanti per le proprietà di layout. Le moderne best practice CSS consigliano l'uso di unità relative per:
- Margini e padding: Garantire che lo spazio vuoto tra gli elementi scali insieme al testo, evitando layout troppo compressi.
- Larghezza e altezza: Creare pulsanti o campi di input che si adattano naturalmente al testo contenuto al loro interno.
- Media query: Definire i breakpoint in
remoemassicura che il layout si adatti in base alla dimensione effettiva del testo, e non solo alla larghezza fisica dello schermo.
Quando sviluppi componenti UI complessi, puoi combinare questo strumento con il Generatore di Box Shadow per creare design system accessibili e completamente scalabili. Una volta completato il foglio di stile, puoi usare un Minificatore CSS per ridurre le dimensioni del file per la produzione.
Usare la tabella di riferimento rapido
Nei design system standard spesso si riutilizzano le stesse scale per la spaziatura e la tipografia. Sotto il calcolatore principale troverai una tabella di riferimento con i valori in pixel più comuni (da 10px a 64px), convertiti automaticamente in rem ed em.
Questa tabella si aggiorna in tempo reale se modifichi la dimensione base del font. È un perfetto promemoria per gli incrementi di spaziatura standard (come 16, 24, 32 e 48 pixel), che ti evita di dover inserire ogni singolo valore nel calcolatore. Se hai bisogno di convertire altre grandezze fisiche, puoi provare il nostro Convertitore di unità generale.