Se hai passato un po’ di tempo a smanettare con il CSS, probabilmente ti sarai ritrovato a fissare un mockup grafico chiedendoti: “Dovrei usare i pixel qui o dovrei trasformarlo in un valore rem?”
Se stai lavorando con una larghezza dello schermo Full HD—nello specifico 1920px—e vuoi convertirla in rem, sei nel posto giusto. Analizzeremo il calcolo esatto, spiegheremo perché funziona usando un’analogia semplicissima e ti rimetteremo a scrivere codice in un batter d’occhio.
La risposta rapida: da 1920px a rem
Andiamo dritti al sodo. Presupponendo che il tuo sito web utilizzi la dimensione predefinita del carattere del browser standard di 16px, 1920px equivalgono esattamente a 120rem.
Come ci siamo arrivati? È una semplice divisione:
1920 ÷ 16 = 120
Tutto qui. Ma se vuoi capire perché dividiamo per 16, perché ci preoccupiamo persino dei rem in primo luogo, o come evitare del tutto di fare questi calcoli, resta con me ancora per un minuto.
(Consiglio da esperto: se sei stanco di fare questi calcoli a mente, salva tra i preferiti un pratico convertitore da pixel a rem che faccia il lavoro pesante al posto tuo).
Pixel vs Rem: l’analogia della cucina
Per capire perché i web developer siano così ossessionati dai rem, aiuta allontanarsi dal computer e fare un salto in cucina.
Pensa ai pixel (px) come a una teglia da forno rigida e di metallo. Se hai una teglia da 22 cm, sarà sempre da 22 cm. Non importa se stai preparando una torta per due persone o per venti; la teglia non cambia dimensioni. Nel web design, un pixel è un’unità assoluta e rigida. Se imposti un box a 1920px, rimarrà a 1920px, anche se l’utente lo sta guardando su uno smartphone piccolissimo o ha problemi di vista e ha bisogno di ingrandire tutto.
I Rem, d’altra parte, sono come una ricetta flessibile. Immagina la ricetta di un pancake che richiede “1 tazza di farina a persona”. Se mangia una persona, usi 1 tazza. Se mangiano quattro persone, si adatta automaticamente a 4 tazze.
In CSS, rem sta per “root em”. Guarda il root (la dimensione del carattere di base impostata dall’utente nel browser) e scala tutto proporzionalmente da lì.
Il numero magico: 16
Di default, quasi tutti i browser web impostano la dimensione del carattere root a 16px.
Quindi, quando dici al CSS di rendere un contenitore largo 1rem, il browser dice: “Ok, la dimensione di base è 16px. Rendiamo questo contenitore largo 16px.”
Se vuoi un wrapper Full HD largo 1920 pixel, ti basta chiederti: “Quante volte il 16 sta nel 1920?”
1920 ÷ 16 = 120
Scrivi max-width: 120rem; nel tuo foglio di stile e sei a posto. Ed ehi, se mai avessi bisogno di fare il percorso inverso (come quando leggi il codice di qualcun altro e ti chiedi cosa diavolo sia 120rem in termini di schermo normali), puoi sempre usare un convertitore da rem a pixel per fare il calcolo al contrario.
Perché ti dovrebbe interessare? (Il fattore accessibilità)
Potresti pensare: “La matematica è noiosa. Perché non scrivo semplicemente 1920px e la chiudo qui?”
Potresti farlo, assolutamente. Ma sviluppare con i rem rende il tuo sito web incredibilmente accessibile per gli utenti che hanno bisogno di ingrandire la pagina. Se un utente ipovedente modifica la dimensione predefinita del testo nel browser da 16px a 24px, un sito realizzato interamente in px rimarrà ostinatamente della stessa dimensione, causando spesso sovrapposizioni di testo o rendendolo illeggibile.
Se hai creato il tuo sito usando i rem, l’intero layout “respira” e si adatta perfettamente alle nuove dimensioni, rispettando le preferenze dell’utente. È fondamentalmente una magia e ti fa apparire come uno sviluppatore di alto livello che si preoccupa davvero dell’accessibilità.
La tua guida rapida (Cheat Sheet) CSS
Se non vuoi tirare fuori la calcolatrice ogni singola volta che scrivi in CSS, ecco una rapida guida di riferimento basata sul root standard di 16px.
La formula: Dimensione pixel desiderata ÷ 16 = valore in rem
- 16px = 1rem (Il valore di base)
- 24px = 1.5rem
- 32px = 2rem (Ottimo per i titoli standard)
- 48px = 3rem
- 64px = 4rem
- 768px = 48rem (Breakpoint comune per tablet)
- 1024px = 64rem (Breakpoint standard per desktop)
- 1440px = 90rem (Desktop grande)
- 1920px = 120rem (Monitor Full HD)
La prossima volta che ti troverai davanti a un design da 1920px, ricordati dell’approccio della ricetta flessibile. Dividi per 16, inserisci 120rem e continua a creare cose fantastiche!