Ridimensionamento delle unità

Il web è un mezzo adattabile, ma a volte è necessario controllarne le dimensioni per migliorare la qualità complessiva dell'interfaccia. Un buon esempio è limitare la lunghezza delle righe per migliorare la leggibilità. Come faresti in un mezzo flessibile come il web?

In questo caso, puoi utilizzare un'unità ch, che corrisponde alla larghezza di un carattere "0" nel carattere visualizzato nelle dimensioni calcolate. Questa unità ti consente di limitare la larghezza del testo con un'unità progettata per ridimensionare il testo, che a sua volta consente un controllo prevedibile indipendentemente dalle dimensioni del testo. L'unità ch è una delle poche unità utili per contesti specifici come questo esempio.

Numeri

I numeri vengono utilizzati per definire opacity, line-height e persino per i valori dei canali di colore in rgb. I numeri sono numeri interi senza unità di misura (1, 2, 3, 100) e decimali (0,1, 0,2, 0,3).

I numeri hanno un significato diverso a seconda del contesto. Ad esempio, quando definisci line-height, un numero è rappresentativo di un rapporto se lo definisci senza un'unità di supporto:

p {
 
font-size: 24px;
 
line-height: 1.5;
}

In questo esempio, 1.5 è uguale al 150% delle dimensioni dei caratteri in pixel calcolate dell'elemento p. Ciò significa che se p ha un font-size di 24px, l'altezza della riga sarà calcolata come 36px.

I numeri possono essere utilizzati anche nelle seguenti posizioni:

  • Quando imposti i valori dei filtri: filter: sepia(0.5) applica un filtro seppia 50% all'elemento.
  • Quando imposti l'opacità: opacity: 0.5 applica un'opacità di 50%.
  • Nei canali a colori: rgb(50, 50, 50), in cui i valori 0-255 sono accettabili per l'impostazione di un valore di colore. Guarda la lezione sui colori.
  • Per trasformare un elemento: transform: scale(1.2) ne modifica le dimensioni del 120% rispetto alle dimensioni iniziali.

Percentuali

Quando utilizzi una percentuale in CSS, devi sapere come viene calcolata. Ad esempio,width viene calcolato come percentuale della larghezza disponibile nell'elemento principale.

div {
 
width: 300px;
 
height: 100px;
}

div p
{
 
width: 50%;
}

Nell'esempio precedente, la larghezza di div p è 150px, supponendo che il layout utilizzi il valore predefinito box-sizing: content-box.

Se imposti margin o padding come percentuale, saranno una parte della larghezza dell'elemento principale, indipendentemente dalla direzione.

div {
 
width: 300px;
 
height: 100px;
}

div p
{
 
margin-top: 50%; /* calculated: 150px */
 
padding-left: 50%; /* calculated: 150px */
}

Nello snippet riportato sopra, sia margin-top che padding-left verranno calcolati come 150px.

div {
 
width: 300px;
 
height: 100px;
}

div p
{
 
width: 50%; /* calculated: 150px */
 
transform: translateX(10%); /* calculated: 15px */
}

Se imposti un valore transform come percentuale, si basa sull'elemento con la trasformazione impostata. In questo esempio, p ha un valore translateX pari a 10% e un valore width pari a 50%. Innanzitutto, calcola quale sarà la larghezza: 150px perché rappresenta il 50% della larghezza dell'elemento principale. Poi prendi 10% di 150px, ovvero 15px.

Dimensioni e lunghezze

Se aggiungi un'unità a un numero, questa diventa una dimensione. Ad esempio, 1rem è una dimensione. In questo contesto, l'unità associata a un numero è indicata nelle specifiche come token di dimensione. Le lunghezze sono dimensioni che si riferiscono alla distanza e possono essere assolute o relative.

Lunghezza assoluta

Tutte le lunghezze assolute vengono risolte in base alla stessa base, rendendole prevedibili ovunque vengano utilizzate nel CSS. Ad esempio, se utilizzi cm per impostare le dimensioni dell'elemento e poi lo stampi, dovrebbe essere preciso se lo confronti con una righello.

div {
 
width: 10cm;
 
height: 5cm;
 
background: black;
}

Se stampassi questa pagina, div verrà stampato come un rettangolo nero di 10 x 5 cm. Tieni presente che i CSS non vengono utilizzati solo per i contenuti digitali, ma anche per lo stile dei contenuti stampati. Le lunghezze assolute possono essere molto utili quando si progetta per la stampa.

Unità Nome Equivalente a
cm Centimetri 1 cm = 96 px/2,54
mm Millimetri 1 mm = 1/10 di 1 cm
D Quarti di millimetro 1 Q = 1/40 di 1 cm
in Pollici 1 in = 2,54 cm = 96 px
pc Picas 1pc = 1/6 di pollice
pt Punti 1 pt = 1/72 di pollice
px Pixel 1 px = 1/96 di 1 pollice

Lunghezza relativa

Una lunghezza relativa viene calcolata in base a un valore di base, in modo simile a una percentuale. La differenza tra questi valori e le percentuali è che puoi assegnare dimensioni contestuali agli elementi. Ciò significa che il CSS ha unità come ch che utilizzano le dimensioni del testo come base e vw che si basa sulla larghezza dell'area visibile (la finestra del browser). La lunghezza relativa è particolarmente utile sul web grazie alla sua natura reattiva.

Unità relative alle dimensioni dei caratteri

Il CSS fornisce unità utili relative alle dimensioni degli elementi della tipografia visualizzata, come le dimensioni del testo stesso (unità em) o la larghezza dei caratteri dei caratteri (unità em).

unità rispetto a:
Rispetto alle dimensioni del carattere, Ad esempio, 1,5 em sarà il 50% più grande della dimensione di base calcolata del carattere dell'elemento principale. (Storicamente, l'altezza della lettera maiuscola "M").
ad es. euristica per determinare se utilizzare x-height, una lettera "x" o ".5em" nelle dimensioni correnti dei caratteri calcolate dell'elemento.
cap Altezza delle lettere maiuscole nelle dimensioni dei caratteri correnti calcolate dell'elemento.
ch Avanzamento dei caratteri medio di un glifo stretto nel carattere dell'elemento (rappresentato dal glifo "0").
Ic Avanzamento medio dei caratteri di un glifo a larghezza intera nel carattere dell'elemento, come rappresentato dal glifo "水" (ideogramma acqua CJK, U+6C34).
rem La dimensione del carattere dell'elemento principale (il valore predefinito è 16 px).
lh Altezza della riga dell'elemento.
rlh Altezza della riga dell'elemento principale.
Il testo CSS è 10 volte eccezionale con etichette per altezza della parte ascendente, altezza del discendente e altezza della x. L'altezza della x rappresenta 1ex e 0 rappresenta 1ch

Unità relative all'area visibile

Puoi utilizzare le dimensioni dell'area visibile (finestra del browser) come base relativa. Queste unità ripartiscono lo spazio visibile disponibile.

unità rispetto a
vw 1% della larghezza dell'area visibile. Le persone usano questa unità per fare trucchi interessanti con i caratteri, come ridimensionare un carattere dell'intestazione in base alla larghezza della pagina in modo che, quando l'utente ridimensiona la pagina, anche il carattere venga ridimensionato.
vh 1% dell'altezza dell'area visibile. Puoi utilizzarlo per organizzare gli elementi in un'interfaccia utente, se, ad esempio, hai una barra degli strumenti per il piè di pagina.
vi 1% delle dimensioni dell'area visibile nell'asse in linea dell'elemento principale. L'asse si riferisce alle modalità di scrittura. Nelle modalità di scrittura orizzontali come l'inglese, l'asse in linea è orizzontale. Nelle modalità di scrittura verticale, come alcuni caratteri giapponesi, l'asse in linea va dall'alto verso il basso.
vb 1% delle dimensioni dell'area visibile nell'asse del blocco dell'elemento principale. Per l'asse del blocco, questa è la direzione del linguaggio. per le lingue LTR, come l'inglese, avrebbero un asse di blocco verticale, poiché i lettori di lingua inglese analizzano la pagina dall'alto verso il basso. Una modalità di scrittura verticale ha un asse di blocco orizzontale.
vmin 1% della dimensione minore dell'area visibile.
vmax 1% della dimensione più grande dell'area visibile.
div {
 
width: 10vw;
}

p
{
 
max-width: 60ch;
}

In questo esempio, il valore div sarà il 10% della larghezza dell'area visibile perché 1vw corrisponde all'1% della larghezza dell'area visibile. L'elemento p ha un max-width pari a 60ch, il che significa che non può superare la larghezza di 60 caratteri "0" nel carattere e nelle dimensioni calcolati.

Unità varie

Esistono altre unità che sono state specificate per gestire particolari tipi di valori.

Unità angolari

Nel modulo Colore, abbiamo esaminato le unità angolari, che sono utili per definire i valori dei gradi, come la tonalità hsl. Sono utili anche per ruotare gli elementi all'interno delle funzioni di trasformazione.

div {
 
width: 150px;
 
height: 150px;
 
transform: rotate(60deg);
}

Utilizzando l'unità di misura dell'angolo deg, puoi ruotare un div di 90° sull'asse centrale.

div {
 
background-image: url('a-low-resolution-image.jpg');
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  div
{
   
background-image: url('a-high-resolution-image.jpg');
 
}
}

Unità di risoluzione

Nell'esempio precedente, il valore di min-resolution è 192dpi. L'unità dpi indica i punti per pollice. Un contesto utile per questo è il rilevamento di schermi ad altissima risoluzione, come i display Retina in una query sui media, e la pubblicazione di un'immagine con una risoluzione più elevata.

Verifica le tue conoscenze

Verifica le tue conoscenze sul dimensionamento

Quali delle seguenti sono dimensioni valide?

in
ux
cm
8
ch
em
ex
px
ui

Quali sono le differenze tra le unità di misura assolute e relative?

Una lunghezza assoluta viene calcolata sulla base di un singolo valore base condiviso, dove un'unità relativa viene confrontata con un valore di base che può cambiare.
I valori assoluti non possono essere modificati, ma le unità relative possono

Le unità dell'area visibile sono assolute.

Falso
Vero

Risorse