Pixel ↔ REM
Converti tra pixel e REM per CSS
Come usare Pixel ↔ REM
Converti tra pixel e REM per CSS Strumento gratuito online, senza registrazione, senza pubblicità invasiva. Usalo ora.
Perché gli sviluppatori web convertono tra pixel e REM?
Le migliori pratiche CSS moderne preferiscono le unità relative (REM, EM) ai pixel assoluti per le dimensioni del testo e la spaziatura. Questo garantisce che gli utenti che configurano una dimensione del testo più grande nelle preferenze del browser vedano il testo scalare proporzionalmente — un requisito fondamentale di accessibilità web.
- Dimensione del testo: Invece di
font-size: 16px, usatefont-size: 1rem. Se la dimensione del testo base del browser di un utente è 20px, tutto si scala proporzionalmente — garantendo una buona esperienza per le persone con disabilità visiva che aumentano la dimensione del testo di sistema. - Spaziatura e padding: I margini e il padding in REM si adattano alle preferenze di testo dell'utente.
padding: 1.5remè più accessibile dipadding: 24pxe rispetta la configurazione personale dell'utente. - Implementazione dei design system: Gli strumenti di design (Figma, Sketch) esportano in pixel. Convertite in REM prima di scrivere il CSS perché il design system sia accessibile fin dall'inizio.
- Media query: Le media query basate su REM rispettano le preferenze di dimensione del testo dell'utente.
@media (min-width: 48rem)si attiva a 768px per una base di 16px, ma a un valore di pixel più alto per gli utenti con testi più grandi. - Librerie di componenti: Costruire componenti riutilizzabili in REM garantisce che si comportino in modo coerente in diversi contesti di dimensione del testo base — importante per chi crea design system condivisi.
REM vs EM: REM (Root EM) è sempre relativo alla dimensione del testo dell'elemento radice (html) — coerente e prevedibile in tutto il documento. EM è relativo alla dimensione del testo dell'elemento corrente — può accumularsi in modo inaspettato negli elementi annidati. REM è preferibile per la maggior parte dei casi d'uso.
Frequently Asked Questions
Qual è la dimensione del testo predefinita del browser?
Il valore predefinito è 16px in tutti i principali browser (Chrome, Firefox, Safari, Edge). Gli utenti possono cambiarlo nelle impostazioni del browser — e questo è proprio lo scopo dell'uso di REM. 1rem = 16px per default, ma può essere 18px, 20px o anche 12px a seconda delle preferenze dell'utente.
Perché alcuni sviluppatori usano html { font-size: 62.5% }?
Impostare la dimensione del testo radice al 62,5% di 16px = 10px facilita il calcolo mentale: 1,6rem = 16px, 2,4rem = 24px. Ma sostituisce la dimensione del testo preferita dall'utente, contrastando in parte lo scopo di accessibilità dei REM. Un approccio migliore è usare calc() di CSS o semplicemente dividere per 16 i valori in pixel.
Quando devo usare PX invece di REM?
Usate PX per i bordi (i bordi da 1px devono rimanere sempre 1px), le ombre e gli elementi dove la dimensione esatta in pixel conta indipendentemente dalle preferenze di testo. Usate REM per le dimensioni del testo, il padding, i margini e qualsiasi spaziatura che deve scalare con il testo per una migliore accessibilità.
Qual è la differenza tra REM, EM e PX?
PX è assoluto — sempre la stessa dimensione indipendentemente dalla configurazione. EM è relativo alla dimensione del testo dell'elemento padre — può accumularsi negli elementi annidati. REM è relativo alla dimensione del testo radice — coerente in tutto il documento. Per un design accessibile, preferite REM a PX per le dimensioni del testo e la spaziatura.
Come converto l'intero design da pixel a REM?
Dividete ogni valore in pixel per la dimensione del testo radice (default: 16). Così 24px ÷ 16 = 1,5rem. Le funzioni Sass (px-to-rem()) o i plugin PostCSS possono automatizzare questa conversione nell'intera codebase. Esistono anche estensioni VS Code che convertono automaticamente durante la digitazione.
REM vs EM vs PX vs VW/VH vs percentuali
PX è assoluto — preciso ma non adattivo. REM scala con la dimensione del testo radice — meglio per la tipografia e la spaziatura accessibile. EM scala con la dimensione del testo dell'elemento padre — utile per la spaziatura a livello di componente. VW/VH sono percentuali della finestra — utili per i layout fluidi. Le percentuali sono relative all'elemento padre — essenziali per le larghezze responsivi. Il CSS moderno combina: REM per la tipografia e la spaziatura, VW/VH per il layout e le percentuali per le larghezze delle colonne.