Come scegliere la migliore unità CSS per creare layout di siti migliori

Le unità CSS sono uno degli aspetti più fondamentali da considerare durante la creazione di un layout del sito. Queste unità definiranno come il tuo progetto interagirà su vari dispositivi.

Ma quando si tratta di unità CSS, ci sono molte opzioni tra cui scegliere e non tutte le opzioni sono uguali. Le unità CSS non sono limitate solo ai caratteri, quindi come sviluppatore front-end, dovresti capire come queste unità influenzano anche i layout.

In questo articolo, ti mostreremo come funzionano le diverse unità CSS, in modo che tu possa utilizzarle per creare layout e design del sito migliori.

Tipi di unità CSS

Le unità CSS possono essere separate nelle seguenti categorie:

• Unità assolute
• Unità relative ai caratteri
• Unità relative della finestra

Unità assolute

Alcune unità dipendono da determinati valori assoluti e non sono influenzate dalle dimensioni dello schermo o dai caratteri. La visualizzazione di queste unità può variare a seconda delle diverse risoluzioni dello schermo, poiché dipendono dai DPI (punti per pollice) degli schermi.

Queste unità sono:

• px (pixel)
• in pollici)
• cm (centimetro)
• mm (millimetro)
• pc (pica)
• pt (punti)

Pixel

I pixel sono l'unità più comunemente usata e accettata. Ed è considerato la base di misura per molte altre unità. Fornisce il risultato più coerente tra i vari dispositivi.

L'elemento box nell'esempio seguente ha un'altezza di 150 px e una larghezza di 150 px e rimarrà lo stesso su tutte le dimensioni dello schermo.

[css]
.scatola{
altezza: 150px;
larghezza: 150px;
}
[/css]

Tutte le altre unità assolute come in (pollici), cm (centimetro) e mm (millimetro) sono unità di misura del mondo reale con pochissimi casi d'uso CSS nel mondo reale.

È comunque utile capire la loro relazione con i pixel, quindi ecco come si confrontano:

• 1 pollice = 96 px
• 1 cm = 37,8 pixel
• 1 mm = 3,78 px

Mentre pc (picas) e pt (punti) sono direttamente correlati ai pollici.

• 1in = 72pt
• 1 pollice = 6 pz

La relazione tra tutte le unità assolute può essere dimostrata in questo modo:

Rem

A parte i pixel, tutte le altre unità assolute hanno casi d'uso minimi o nulli per i CSS dello schermo, ma poiché sono unità di misura del mondo reale, possono essere efficacemente utilizzate nei CSS di stampa. (Nel caso ti stia chiedendo dei pixel, funzionano bene anche nei CSS di stampa!)

Unità relative ai caratteri

Ci sono alcune unità che dipendono dalla dimensione del carattere o dalla famiglia di caratteri del documento o dai suoi elementi di livello padre. Questo include unità come:

• em
• rem
• ex
• cap

Em

Em è un'unità di lunghezza relativa; dipende dalla dimensione del carattere dell'elemento genitore o del documento. Per impostazione predefinita, 1em è uguale a 16px se non è definita alcuna font-size .

Em eredita la dimensione dalla dimensione del carattere del suo genitore immediato. Quindi, se un elemento genitore ha font-size:18px , allora 1em sarà misurato come 18px per tutti i suoi figli.

Qui abbiamo un div .post con tre figli, .post-item , con un titolo e del testo.

[html]
<div class=”post”>
<div class=”post-item”>
<h2>Titolo</h2>
Lorem Ipsum è semplicemente un testo fittizio dell'industria della stampa e della composizione. Lorem Ipsum è stato il testo fittizio standard del settore sin dal 1500
</div>
<div class=”post-item”>
<h2>Titolo</h2>
Lorem Ipsum è semplicemente un testo fittizio dell'industria della stampa e della composizione. Lorem Ipsum è stato il testo fittizio standard del settore sin dal 1500
</div>
<div class=”post-item”>
<h2>Titolo</h2>
Lorem Ipsum è semplicemente un testo fittizio dell'industria della stampa e della composizione. Lorem Ipsum è stato il testo fittizio standard del settore sin dal 1500
</div>
</div>
[/html]

Ora il genitore .post ha un font-size:20px e l'elemento figlio .post div ha il proprio font-size:1.2em con padding:0.75em e margin:0.75em , quindi il padding e il margine calcolati saranno 18px (20px *1.2em*0.75em).

[css]
html{
dimensione carattere: 20px;
}

.inviare{
dimensione carattere: 20px;
}

.post div{
dimensione carattere: 1.2em;
}

.post-articolo{
sfondo: rosa;
imbottitura: 0,75 cm;
margine:0.75em;
}

.post-item h2{
dimensione carattere: 1,5 em;
margine:0.5em 0;
}

.post-item p{
margine:0;
dimensione carattere: 1em;
}
[/css]

Come puoi vedere, gli elementi figlio ereditano i valori dal genitore.

Il vantaggio dell'utilizzo di em è che, se decidi di modificare proporzionalmente font-size , padding e margin di ciascun elemento, devi solo modificare la dimensione del carattere dell'elemento genitore e tutti gli altri elementi si adatteranno di conseguenza.

Questo non sarà il caso di unità assolute come px, in cui devi regolare ogni elemento individualmente.

Questa natura di ereditarietà può essere un po' complicata da gestire, tuttavia, se anche gli elementi nidificati hanno la propria font-size in em.

Come nella demo precedente, se avvolgi il titolo e il paragrafo all'interno di un altro div in uno degli elementi secondari, vedrai strani risultati.

[html]
<div class=”post-item”>
<div>
<h2>Titolo</h2>
Lorem Ipsum è semplicemente un testo fittizio dell'industria della stampa e della composizione. Lorem Ipsum è stato il testo fittizio standard del settore sin dal 1500
</div>
</div>
[/html]

Poiché post-item ha un div nidificato, la dimensione di base cambierà da 24px a 28.8px (20px*1.2em*1.2em) e font-size e margin per h2 cambieranno in 43.2px (20px*1.2em*1.2em *1.5em) e 14.4px (20px*1.2em*1.2em*0.5em), rispettivamente.

Rem

Rem può essere davvero utile in questi tipi di situazioni perché si riferiscono sempre alla dimensione del carattere dell'elemento radice, non all'elemento genitore.

Se prendi l'esempio precedente e cambi le unità da em a rem per .post div , vedrai che tutti gli elementi figli si correggono da soli.

[css]
.post div{
dimensione carattere: 1,2 rem;
}
[/css]

Una volta che l'unità è cambiata da em a rem, la sua base cambia da parent div a root element, che ha front-size:20px .

Quindi, il calcolo sarà 20px*1.2rem*value e h2 e p avranno entrambi font-size e margin coerenti, indipendentemente dal genitore.

Ex

Ex è relativo all'altezza x del carattere corrente ed è usato molto raramente. La misurazione dell'altezza x non è coerente; a volte proviene dal carattere stesso ea volte il browser si calcola da solo.

Come em e rem, dipende dal carattere, ma la differenza principale è che ex cambierà quando cambi anche la font-family , il che non è il caso degli altri due.

[css]
.scatola{
larghezza: 150 ex;
altezza: 150ex;
}
[/css]

cap

Ch è simile a ex ma non dipende dall'altezza delle x; piuttosto sulla larghezza del carattere zero (0). Cambia anche con font-family .

[css]
.scatola{
larghezza: 150ch;
altezza: 150ch;
}
[/css]

Unità relative della finestra

Esistono alcune unità che dipendono dall'altezza e dalla larghezza della finestra, ad esempio:

• vh (altezza della finestra)
• vw (larghezza finestra)
• vmin (visualizzazione minima)
• vmax (visualizzazione massima)

Vh

Vh (altezza del viewport) è misurata come 1vh pari all'1% dell'altezza del viewport. Questa unità è molto utile per creare elementi a tutta altezza. Vh reagisce in modo simile alla percentuale, ma non dipende dall'altezza dell'elemento padre.

Puoi usare vh ovunque, ma il caso d'uso più comune di vh è per creare elementi a tutta altezza. In questo esempio, la classe full-height creerà un contenitore blu che sarà al 100% dell'altezza del viewport.

[css]
.a tutta altezza{
altezza: 100 vh;
sfondo: blu;
}
[/css]

VW

Vw (larghezza del viewport) è simile a vh ma considera la larghezza, piuttosto che l'altezza del viewport. 1vw è uguale all'1% della larghezza del viewport. Queste unità possono essere davvero utili se desideri creare un viewport reattivo basato sulla tipografia.

In questo esempio, font-siz di h1 è il 6% della larghezza del viewport, quindi se la larghezza del viewport è 1000px, la dimensione del font sarà 60px e se il viewport è 500px, la dimensione del font sarà 30px.

[css]
h1{
dimensione carattere: 6vw;
}
[/css]

Vmin

Vmin viene calcolato sulla base del valore minimo della larghezza o dell'altezza del viewport, qualunque sia il minore. Supponi di avere una dimensione del viewport di 1000 px di altezza per 800 px di larghezza. 1vmin sarà uguale a 8px.

Vmax

Vmax viene calcolato esattamente l'opposto di vmin , dove viene considerato il valore massimo del viewport.

Come il precedente esempio di viewport con 1000px di altezza per 800px di larghezza, 1vmax sarà uguale a 10px.

Ora esploriamo come utilizzare vmin e vmax in modo efficace. Usando il nostro esempio precedente, supponiamo di voler avere un riempimento fluido e un margine basato sulla dimensione del viewport ora, piuttosto che su un valore fisso.

In questo frammento di codice, ho impostato il padding su 3vmax e il margine su 1.5vmin .

[css]
.post-articolo{
sfondo rosa;
imbottitura: 3vmax;
margine: 1,5 vmin;
}
[/css]

Il padding e il margine cambieranno in base alle dimensioni del viewport.

Unità percentuale (%).

L'unità percentuale (%) non appartiene a nessuna categoria particolare menzionata sopra, ma può essere classificata come unità relativa. È relativo al suo elemento genitore.

La percentuale è principalmente associata all'altezza e alla larghezza di un elemento, ma può essere utilizzata ovunque siano consentite le unità di lunghezza CSS.

La percentuale è una delle unità più utili per creare un layout reattivo o fluido. Framework popolari come Bootstrap, Foundation e Bulma usano la percentuale per il loro layout di base.

Qui la classe full-width avrà il 100% di larghezza del suo elemento genitore.

[css]
.intera larghezza{
larghezza: 100%;
}
[/css]

Conclusione

Abbiamo coperto quasi tutte le unità CSS disponibili per l'uso. A seconda dei tuoi obiettivi, alcuni saranno più adatti di altri. Come sviluppatore front-end, è sempre bene conoscere le tue opzioni perché non sai mai quale potrebbe essere necessario nel tuo prossimo progetto.

Quindi, quali unità usi più frequentemente per ottenere il risultato desiderato? Fatecelo sapere nella sezione commenti qui sotto!