Unità CSS
Unità CSS
CSS ha diverse unità per esprimere una lunghezza.
Molte proprietà 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, utilizzando px (pixel):
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
Nota: non può essere visualizzato uno spazio bianco tra il numero e l'unità. Tuttavia, se il valore è
0, l'unità può essere omessa.
Per alcune proprietà CSS sono consentite lunghezze negative.
Esistono due tipi di unità di lunghezza: assoluta e relativa .
Lunghezze assolute
Le unità di lunghezza assoluta sono fisse e una lunghezza espressa in una di queste apparirà esattamente come quella dimensione.
Le unità di lunghezza assoluta non sono consigliate per l'uso sullo schermo, poiché le dimensioni dello schermo variano molto. Tuttavia, possono essere utilizzati se il supporto di output è noto, ad esempio per il layout di stampa.
| Unit | Description |
|---|---|
| cm | centimeters |
| mm | millimeters |
| in | inches (1in = 96px = 2.54cm) |
| px * | pixels (1px = 1/96th of 1in) |
| pt | points (1pt = 1/72 of 1in) |
| pc | picas (1pc = 12 pt) |
* I pixel (px) sono relativi al dispositivo di visualizzazione. Per i dispositivi a basso dpi, 1px è un pixel del dispositivo (punto) del display. Per stampanti e schermi ad alta risoluzione 1px implica più pixel del dispositivo.
Lunghezze relative
Le unità di lunghezza relativa specificano una lunghezza relativa a un'altra proprietà di lunghezza. Le unità di lunghezza relativa si adattano meglio tra diversi mezzi di rendering.
| Unit | Description | |
|---|---|---|
| em | Relative to the font-size of the element (2em means 2 times the size of the current font) | |
| ex | Relative to the x-height of the current font (rarely used) | |
| ch | Relative to width of the "0" (zero) | |
| rem | Relative to font-size of the root element | |
| vw | Relative to 1% of the width of the viewport* | |
| vh | Relative to 1% of the height of the viewport* | |
| vmin | Relative to 1% of viewport's* smaller dimension | |
| vmax | Relative to 1% of viewport's* larger dimension | |
| % | Relative to the parent element |
Suggerimento: le unità em e rem sono pratiche per creare layout perfettamente scalabili!
* Viewport = la dimensione della finestra del browser. Se la finestra è larga 50 cm, 1vw = 0,5 cm.
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente l'unità di lunghezza.
| Length Unit | |||||
|---|---|---|---|---|---|
| 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 |