Il mondo digitale ragiona in pixel, la stessa regola vale quindi anche per il web dove a volte basta un pixel per distruggere un layout e avere un risultato grafico completamente distorto rispetto alle aspettative. Durante la creazione di una pagina ci troviamo spesso con un'immagine di come dovrebbe essere l'interfaccia e iniziamo a tagliarla contando pixel per pixel. Al termine del lavoro avremo sicuramente un livello di fedeltà altissimo; ma cosa succede nel caso in cui, ad esempio, la pagina viene aperta su un televisore? Un font di 12px può essere perfetto per il cellulare, ma non per una proiezione su schermo molto più ampio, dove la distanza di lettura è inevitabilmente maggiore.
Per queste ragioni affidarci ad un dimensionamento basato sui pixel potrebbe essere controproducente. Il CSS oltre a gestire unità di misura assolute, come inches (in), points (pt), millimetri (mm), picas (pc), ecc... offre la possibilità di utilizzare unità relative al contenitore (em), all'elemento (rem) o alla viewport del dispositivo (vw/vh).
Prendiamo in considerazione il codice seguente e andiamo a verificare le dimensioni
<div> <p>ciao em</p> </div> <p>ciao rem</p> <label>ciao vw</label>
html{ font-size: 20px; } div{ font-size: 30px; } div > p{ font-size: 2em; } p{ font-size: 2rem; } label{ font-size: 10vw; }
Il paragrafo contenuto nel div avrà un font-size finale equivalente a 2 volte il font-size definito nel div. Il secondo paragrafo avrà una grandezza finale di 40px: 2 volte la dimensione definita nell'elemento . La label sarà pari al 10% della larghezza della finestra, modificando le dimensioni del browser vedremo infatti l'altezza del carattere variare coerentemente.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Evitare il flickering dei componenti nel prerender di Blazor 8
Usare una container image come runner di GitHub Actions
C# 12: Cosa c'è di nuovo e interessante
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Usare le collection expression per inizializzare una lista di oggetti in C#
Mascherare l'output di un valore all'interno dei log di un workflow di GitHub
Usare un KeyedService di default in ASP.NET Core 8
Eseguire operazioni sui blob con Azure Storage Actions
Applicare il versioning ai nostri endpoint ASP.NET Core Minimal API
Usare lo spread operator con i collection initializer in C#
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes
Utilizzare un service principal per accedere a Azure Container Registry