Unità CSS

Unità CSS

CSS ha diversi tipi di unità di lunghezza.

Molti attributi CSS accettano valori di "lunghezza", come width,margin,padding,font-size ecc.

La lunghezza è un numero seguito da un'unità di lunghezza, come 10px,2em ecc.

esempio

Imposta diversi valori di lunghezza con px (pixel):

h1 {
  font-size: 60px;
}
p {
  font-size: 25px;
  line-height: 50px;
}

Prova personalmente

Non devono esserci spazi tra il numero e l'unità. Tuttavia, se il valore è 0, l'unità può essere omessa.

Per alcune proprietà CSS, è permesso utilizzare valori negativi di lunghezza.

Ci sono due tipi di unità di lunghezza:unità assoluteeunità relative.

lunghezza assoluta

Le unità di lunghezza assolute sono fisse; la lunghezza rappresentata da qualsiasi unità di lunghezza assoluta verrà visualizzata esattamente di quella dimensione.

Non si consiglia l'uso di unità di lunghezza assolute sullo schermo perché la dimensione dello schermo varia molto. Tuttavia, se si conosce il mezzo di uscita, si possono utilizzare, ad esempio per la layout di stampa (print layout).

unità descrizione TIY
cm centimetro Prova a fare un tentativo
mm millimetro Prova a fare un tentativo
in pollice (1in = 96px = 2.54cm) Prova a fare un tentativo
px * pixel (1px = 1/96 di 1 pollice) Prova a fare un tentativo
pt punto (1pt = 1/72 di 1 pollice) Prova a fare un tentativo
pc pica (1pc = 12 pt) Prova a fare un tentativo

* Il pixel (px) è relativo al dispositivo di visualizzazione. Per dispositivi con dpi bassi, 1px è un pixel del display (punto). Per stampanti e schermi ad alta risoluzione, 1px rappresenta più pixel del dispositivo.

lunghezza relativa

L'unità di lunghezza relativa definisce la lunghezza rispetto a un'altra proprietà di lunghezza. Le unità di lunghezza relativa si adattano meglio tra diversi mezzi di rendering.

unità descrizione TIY
em dimensione del font relativa all'elemento (font-size) (2em rappresenta il doppio della dimensione del font corrente) Prova a fare un tentativo
ex altezza x-height relativa al font corrente (raramente utilizzato) Prova a fare un tentativo
ch larghezza rispetto a "0" (zero) Prova a fare un tentativo
rem dimensione del font relativa all'elemento radice (font-size) Prova a fare un tentativo
vw 1% rispetto alla larghezza * della viewport Prova a fare un tentativo
vh 1% dell'altezza * della viewport Prova a fare un tentativo
vmin 1% rispetto alla dimensione * della viewport Prova a fare un tentativo
vmax Rispetto alla dimensione più grande del viewport * 1％ Prova a fare un tentativo
% Rispetto all'elemento genitore Prova a fare un tentativo

Suggerimento:Le unità em e rem possono essere utilizzate per creare layout perfettamente scalabili!

* Visuale (Viewport) = dimensione della finestra del browser. Se la visuale è larga 50 centimetri, allora 1vw = 0.5 centimetri.

Supporto del browser

I numeri nelle tabelle indicano la versione del browser che supporta completamente l'unità di lunghezza.

Unità di lunghezza
em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5
ch 27.0 9.0 1.0 7.0 20.0
rem 4.0 9.0 3.6 4.1 11.6
vh, vw 20.0 9.0 19.0 6.0 20.0
vmin 20.0 12.0 19.0 6.0 20.0
vmax 26.0 16.0 19.0 7.0 20.0