Ridimensionamento delle unità

The CSS Podcast - 008: Sizing Units

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 alle dimensioni calcolate. Questa unità 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 una proporzione se lo definisci senza un'unità di misura 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 verrà calcolata come 36px.

I numeri possono essere utilizzati anche nei seguenti punti:

• Quando imposti i valori per i filtri: filter: sepia(0.5) applica all'elemento un filtro seppia 50%.
• Quando imposti l'opacità: opacity: 0.5 applica un'opacità di 50%.
• Nei canali di colore: rgb(50, 50, 50), dove i valori 0-255 sono accettabili per impostare 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, si tratterà di 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 */
}

Nell'esempio precedente, 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 la larghezza: 150px perché corrisponde al 50% della larghezza del contenitore. Poi, prendi 10% di 150px, che è 15px.

Dimensioni e lunghezze

Se colleghi 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 riga. Tieni presente che le unità fisiche, come cm e in, non verranno visualizzate in modo affidabile con queste dimensioni sugli schermi a causa delle variazioni nelle dimensioni dei pixel. Le unità di misura fisiche sono ideali per i fogli di stile di stampa, dove saranno più affidabili.

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

Se stampi questa pagina, il simbolo div verrà stampato come un rettangolo nero di 10 x 5 cm. Tieni presente che il CSS viene utilizzato non solo per i contenuti digitali, ma anche per dare stile ai contenuti stampati. Le lunghezze assolute possono essere molto utili quando si progetta per la stampa.

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 definire le dimensioni in base a una dimensione di base pertinente, ad esempio le dimensioni della finestra o le dimensioni del carattere predefinite. Ciò significa che il CSS ha unità come ch che utilizzano le metriche delle dimensioni dei caratteri come base e vw che si basa sulla larghezza dell'area visibile (la finestra del browser). Le lunghezze relative sono particolarmente utili sul web a causa della sua natura adattabile.

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).ch

Unità relative all'area visibile

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

div {
  width: 10vw;
}

p {
  max-width: 60ch;
}

In questo esempio, div sarà pari al 10% della larghezza dell'area visibile perché 1vw è pari 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à alternative relative all'area visibile

Il valore delle unità relative all'area visibile rimane invariato finché le dimensioni dell'area visibile non cambiano. Tuttavia, i browser mobile di solito mostrano o nascondono gli elementi dell'interfaccia utente per mostrare il maggior numero possibile di contenuti su schermi piccoli, senza modificare le dimensioni calcolate della visualizzazione. Puoi utilizzare alternative alle unità relative al viewport per tenere conto di queste modifiche all'area visibile.

Unità relative al contenitore

Puoi utilizzare le dimensioni del contenitore di un elemento come base relativa. Queste unità suddividono lo spazio disponibile del contenitore. Sono utili all'interno delle query del contenitore per impostare le dimensioni dei caratteri in base allo spazio disponibile.

Unità varie

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

Unità di misura degli angoli

Nel modulo sul colore, abbiamo esaminato le unità di misura degli angoli, utili per definire i valori in gradi, come la tonalità in 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 contenuti multimediali, e la pubblicazione di un'immagine con una risoluzione più elevata.

Verificare di aver compreso

Verifica le tue conoscenze sulle taglie

Risorse

• Livello 4: valori e unità delle specifiche CSS
• Dimensioni e unità su MDN
• All About Ems
• Spiegazione delle percentuali