TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Tutorial sulle unità CSS

9

La misurazione di proprietà come la dimensione del carattere, l’altezza della linea, il margine, il riempimento, la larghezza, l’altezza, ecc. Vengono eseguite in CSS utilizzando le unità di lunghezza. Esistono quattro tipi fondamentali di unità di lunghezza utilizzate nei CSS: relativo, assoluto, angolo e tempo. In questo articolo, esploriamo come funzionano queste unità di lunghezza insieme agli esempi.

Correlati: come creare un widget di scorrimento verso l’alto con CSS e jQuery?

Unità di lunghezza relativa

in Calcolato rispetto alla dimensione del carattere corrente dell’elemento padre. Ad esempio, 2em indica una dimensione 2 volte maggiore della dimensione del carattere dell’elemento corrente.
ex Calcolato rispetto all’altezza della dimensione del carattere corrente.
px La dimensione dei pixel viene calcolata in relazione al dispositivo di visualizzazione. Per i dispositivi a basso dpi 1px è un punto nel display. Per gli schermi ad alta risoluzione, 1px può indicare più pixel del dispositivo.
% Valore percentuale relativo a qualsiasi elemento. Ad esempio, 50% di larghezza del contenitore.
rem Relativo alla dimensione del carattere dell’elemento radice.
vw Misurato come valore percentuale della larghezza della finestra. Se la larghezza della finestra è 100 cm, allora 1vw=1 cm.
vh Misurato come valore percentuale dell’altezza della finestra. Se l’altezza della finestra è 100 cm, allora 1vh=1 cm.
vmin Valore percentuale della dimensione della finestra più piccola. È supportato come “vm” in Internet Explorer 9 e versioni successive.
vmax Valore percentuale della dimensione della finestra più grande. Questo non è supportato da IE.
ch Misurato rispetto alla larghezza di zero (0).

"vmin" e "vmax" non sono supportati da Internet Explorer. L’unità non standard "vm" è supportata da IE 9 o successivo. Calcola il valore relativo considerando il minimo dell’altezza o della larghezza della finestra.

Unità di lunghezza assoluta

in Valore assoluto in pollici. 1 pollice = 2,54 centimetri.
cm centimetri
mm Millimetri
per Punti (1 punto = 1/72 pollici)
pc Foto (1 Foto = 12 punti)

Unità angolari

tu Livello
1 c gradini
opera radianti
giro Giri

Unità di tempo

Esempi

Di seguito sono riportati alcuni esempi di come le diverse unità di lunghezza CSS influiscono sulla visualizzazione del contenuto del testo. Fondamentalmente abbiamo mostrato valori relativi e assoluti poiché le unità angolo/tempo non sono applicabili per il contenuto del testo.

Questo è il carattere con dimensione 2em. La dimensione del carattere dell’elemento è 18 px e quindi questa linea è calcolata relativamente come 36 px (2 × 18).

Questo è il carattere con dimensione 20px e colore rosso.

Questo è il carattere con dimensione 36px e colore blu. Questo è equivalente a 2em di dimensione poiché la dimensione del carattere dell’elemento è 18px.

Questo è il carattere con dimensione 18px e colore verde. La larghezza è limitata al 50% della larghezza totale dell’elemento. Aggiungiamo più contenuti per mostrarti che la larghezza è limitata rispetto alle frasi precedenti.

Questa linea viene creata con font-size=2ex value.

Questa linea viene creata con il valore font-size=2rem che è 2 volte quello del valore pixel dell’elemento radice 36px (2×18).

Questa riga viene creata con il valore font-size=15vh, ridimensiona l’altezza del browser per vedere come cambia questo testo.

Questa linea viene creata con font-size=0.5cm valore assoluto.

Questa riga viene creata con font-size=2pc valore assoluto.

Correlati: tutorial sul modello di scatola CSS per principianti.

Angolo e unità di tempo

Le unità di angolo e tempo non vengono utilizzate con i valori di lunghezza. Ma generalmente utilizzato con la trasformazione CSS e le proprietà di animazione di transizione come di seguito:

.image { transform: rotate(10rad); transition-duration: 2s; }

Punti da ricordare quando si utilizzano le unità di lunghezza nei CSS

Di seguito sono riportati alcuni dei punti importanti da ricordare quando si utilizzano le unità CSS:

  • Generalmente i valori "em" e "rem" vengono utilizzati per creare buoni layout.
  • "em" è relativo all’attributo font-size dell’elemento genitore. 2em indica una dimensione del carattere 2 volte maggiore dell’elemento corrente.
  • “px" è relativo alla risoluzione del dispositivo di visualizzazione.
  • "%" è relativo a un altro valore dell’unità di lunghezza.
  • Tutte le unità di lunghezza CSS sono supportate da tutti i principali browser come Chrome, Firefox, IE, Safari e Opera.
  • I valori calcolati con "em" sono relativi all’elemento genitore, quindi devono essere usati con attenzione quando si nidificano più elementi per evitare risultati imprevisti. Il modo più semplice è usare "rem" che si basa sulla dimensione dell’elemento radice.
  • Tutte le unità CSS vengono misurate senza alcuno spazio tra il valore e l’unità.
  • Un valore di lunghezza pari a zero (0) non richiede l’identificatore. Ad esempio, "margine=0;" è il modo corretto di definire e non "margin=0px;".

Correlati: come creare una pagina di parallasse a larghezza intera con CSS?

Fonte di registrazione: www.webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More