Ricerca…


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:

3
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

3

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:

elementi di input scalabili

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
3
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

inserisci la descrizione dell'immagine qui



Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow