CSS => Unità di lunghezza

introduzione

Una misurazione della distanza CSS è un numero immediatamente seguito da un'unità di lunghezza (px, em, pc, in, ...)

CSS supporta un numero di unità di misura della lunghezza. Sono assoluti o relativi.

Sintassi

unità di valore
1em

Parametri

Unità	Descrizione
%	Definire le dimensioni in termini di oggetti padre o oggetto corrente dipendente dalla proprietà
em	Relativo alla dimensione del carattere dell'elemento (2em significa 2 volte la dimensione del carattere corrente)
rem	Relativo alla dimensione del carattere dell'elemento radice
vw	Relativo all'1% della larghezza del viewport *
vh	Relativo all'1% dell'altezza del viewport *
Vmin	Relativo all'1% della dimensione più piccola * della finestra
vmax	Relativo all'1% della dimensione più grande * della finestra
centimetro	centimetri
mm	millimetri
nel	pollici (1in = 96px = 2,54 cm)
px	pixel (1px = 1 / 96th di 1in)
pt	punti (1pt = 1/72 di 1 in)
pc	picas (1pc = 12 pt)
S	secondi (usato per animazioni e transizioni)
Signorina	millisecondi (utilizzato per animazioni e transizioni)
ex	Relativo all'altezza x del carattere corrente
ch	Basato sulla larghezza del carattere zero (0)
fr	unità frazionale (utilizzata per il layout griglia CSS)

Osservazioni

Uno spazio bianco non può apparire tra il numero e l'unità. Tuttavia, se il valore è 0, l'unità può essere omessa.
Per alcune proprietà CSS, sono consentite lunghezze negative.

Dimensione del carattere con rem

CSS3 introduce alcune nuove unità, inclusa l'unità rem , che sta per "root em". Diamo un'occhiata a come funziona rem .

Per prima cosa, diamo un'occhiata alle differenze tra em e rem .

em : relativo alla dimensione del carattere del genitore. Ciò causa il problema di composizione
rem : relativo alla dimensione del carattere dell'elemento root o <html> . Ciò significa che è possibile dichiarare una singola dimensione del carattere per l'elemento html e definire tutte le unità rem come una percentuale di quello.

Il problema principale con l'uso di rem per il dimensionamento dei font è che i valori sono alquanto difficili da usare. Ecco un esempio di alcune dimensioni di carattere comuni espresse in unità rem , assumendo che la dimensione di base sia 16px:

10px = 0.625rem
12px = 0,75rem
14px = 0.875rem
16px = 1rem (base)
18px = 1.125rem
20px = 1,25rem
24px = 1.5rem
30px = 1.875rem
32px = 2rem

CODICE:

html { 
  font-size: 16px; 
}

h1 { 
  font-size: 2rem;          /* 32px */
}

p { 
  font-size: 1rem;          /* 16px */ 
}

li { 
  font-size: 1.5em;         /* 24px */
}

Creazione di elementi scalabili usando rems ed ems

Puoi usare rem definito dalla font-size del font-size del tuo tag html per gli elementi di stile, impostando la font-size un valore di rem e usando em all'interno dell'elemento per creare elementi in scala con la font-size globale.

HTML:

<input type="button" value="Button">
<input type="range">
<input type="text" value="Text">

CSS pertinente:

html {
  font-size: 16px;
}

input[type="button"] {
  font-size: 1rem;
  padding: 0.5em 2em;
}

input[type="range"] {
  font-size: 1rem;
  width: 10em;
}

input[type=text] {
  font-size: 1rem;
  padding: 0.5em;
}

Possibile risultato:

vh e vw

CSS3 ha introdotto due unità per rappresentare le dimensioni.

vh , che sta per viewport height è relativo all'1% dell'altezza del viewport
vw , che sta per viewport width è relativo all'1% della larghezza della finestra

div { 
  width: 20vw; 
  height: 20vh;
}

Sopra, la dimensione per il div occupa il 20% della larghezza e dell'altezza del viewport

vmin e vmax

vmin : relativo all'1 percento della dimensione più piccola della finestra
vmax : relativo all'1 percento della dimensione maggiore della finestra

In altre parole, 1 vmin è uguale al più piccolo di 1 vh e 1 vw

1 vmax è uguale al maggiore di 1 vh e 1 vw

Nota : vmax non è supportato in:

qualsiasi versione di Internet Explorer
Safari prima della versione 6.1

usando percentuale%

Una delle unità utili durante la creazione di un'applicazione reattiva.

Le sue dimensioni dipendono dal suo contenitore principale.

Equazione:

(Larghezza contenitore principale) * (Percentuale (%)) = Output

Per esempio:

Il genitore ha una larghezza di 100 px mentre il bambino ha il 50% .

Sull'output , la larghezza del Child sarà la metà (50%) del Parent 's, che è 50px .

HTML

<div class="parent">
   PARENT
   <div class="child">
     CHILD
   </div>
</div>

CSS

<style>

*{
  color: #CCC;
}

.parent{
  background-color: blue;
  width: 100px;
}

.child{
  background-color: green;
  width: 50%;
}

</style>

PRODUZIONE

Modified text is an extract of the original Stack Overflow Documentation

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

CSS
Unità di lunghezza

Ricerca…