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
Effettuare chiamate con versioning da Blazor ad ASP.NET Core
Accesso sicuro ai secrets attraverso i file in Azure Container Apps
Potenziare Azure AI Search con la ricerca vettoriale
Verificare la provenienza di un commit tramite le GitHub Actions
Gestire liste di tipi semplici con Entity Framework Core
Utilizzare le collection expression in C#
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Criptare la comunicazione con mTLS in Azure Container Apps
Utilizzare database e servizi con gli add-on di Container App
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Usare una container image come runner di GitHub Actions