Unità di misura: "px", "em", "rem" e altri

 In questo articolo cercherò non solo di parlare di diverse unità di misura, ma anche di costruire un quadro generale di cosa e quando scegliere.

Pixel: px

Il pixel px è l'unità di misurazione più semplice, assoluta e finale.

Il numero di pixel è impostato nelle impostazioni di risoluzione dello schermo, un px è solo uno di questi pixel sullo schermo. Il browser calcolerà tutti i valori in pixel.

I pixel possono essere frazionati, ad esempio, la dimensione può essere impostata a 16.5px. Questo è perfettamente normale, il browser stesso utilizza pixel frazionati per i calcoli interni. Ad esempio, c'è un elemento con una larghezza di 100px, deve essere suddiviso in tre parti quindi otterremo 33.333 ... px  . Alla visualizzazione finale, i pixel frazionari sono naturalmente vengono arrotondati e diventano interi.

Per i dispositivi mobili che dispongono di molti pixel sullo schermo, ma lo schermo stesso è abbastanza piccolo per fornire la leggibilità, il browser applica automaticamente scalabiliat o ridimensionamento

Vantaggi

    Il vantaggio principale di un pixel è la chiarezza

Svantaggi

    Altre unità di misura - in un certo senso sono  "più potenti", sono relative e consentono di stabilire relazioni tra diverse dimensioni

 

Perché un cm contiene esattamente 38 pixel?

Nella vita reale, un centimetro è uno standard di lunghezza, un centesimo di metro. E il pixel può essere diverso, a secondo dello schermo.

Unita di misura relativa al font: em

1em è l'attuale dimensione del carattere.

È possibile usare qualsiasi proporzione dal carattere corrente: 2em, 0.5em, ecc.

Le dimensioni in em - relative, sono determinate dal contesto corrente.

Ad esempio, confrontiamo px con em in questo esempio:

<div style="font-size:24px">
  Struzzi
  <div style="font-size:24px">Vivono in Africa </div>
</div>

Struzzi
Vivono in Africa

24 pixel anche in  Africa sono 24 pixel, quindi la dimensione del carattere in <div> è la stessa.

Ma vediamo un esempio simile con em invece di px:

<div style="font-size:1.5em">
  Struzzi
  <div style="font-size:1.5em">Vivono in Africa </div>
</div>

Struzzi
Vivono in Africa

Poiché il valore in em viene calcolato rispetto le dimensioni del font corrente, la stringa nidificata è 1,5 volte più grande della prima.

Si scopre che le dimensioni date in em diminuiranno o aumentano insieme al carattere. Dato che le dimensioni di caratteri sono  di solito definite per genitore e possono essere modificate esattamente in un unico luogo, questo può essere molto inconveniente.

Che cos'è la dimensione del carattere?

Che cos'è la "dimensione del carattere"? Questo non è "la dimensione della lettera più grande nel testo", come si potrebbe pensare.

La dimensione del carattere è una "unità convenzionale", che è incorporata nel font.

Di solito è leggermente più grande della distanza dalla cima della lettera più grande al fondo della più piccola. Cioè, si suppone che ogni lettera o una loro combinazione ci sta  in questa altezza. Ma così "le code" di lettere, come p, g possono andare oltre questo valore, cioè uscire da sotto. Pertanto, di solito l'altezza della linea è leggermente più grande della dimensione del carattere.

Le unità ex e ch

Nella specifica uficilae sono specificate anche  le unità ex e ch,  che significano la dimensione del simbolo "x" e la dimensione del simbolo "0".

Queste dimensioni sono sempre presenti nel font, anche se secondo il  codice al loro posto potrebbereo esserci  altri letere, non esattamente lettera  "x" e zero "0". In questo caso, queste unita  portano un valore molto più condizionale.

Queste unità vengono usate molto raramente, poiché la "dimensione del carattere" in em sono piu che sufficienti.

Precentuale %

Percentuali %, come anche em. rappresenta un valore relativo

Quando diciamo "percentuale", nasce la domanda - "Percentuale di cosa?"

In genere, la percentuale si calcola  dal valore della proprietà del genitore con lo stesso nome, ma non sempre.

Questa è una caratteristica molto importante del percentuale che, purtroppo, è spesso trascurata.

Ecco un esempio con %, sembra esattamente lo stesso di em:

<div style="font-size:150%">
  Struzzi
  <div style="font-size:150%">Vivono in Africa </div>
</div>

Struzzi
Vivono in Africa

Nell'esempio precedente, la percentuale viene calcolata in base delle dimensioni del carattere del genitore.

E qui sono esempi di eccezioni, in cui il % vine calcolato diversamente:

margin-left
    Quando imposti la proprietà margin-left in %, la percentuale viene calcolata dalla larghezza del blocco padre e non dal margine sinistro.

Line-height

    Quando imposti l'altezza di linea in %, la percentuale viene calcolata dalla dimensione attuale del carattere e non dall'altezza di linea del genitore.

width/height
    Per  width/height , di solito una percentuale della larghezza / altezza del genitore, ma con la position:fixed , la percentuale viene calcolata dalla larghezza / altezza della finestra (non il genitore e non il documento). Inoltre, a volte % richiede condizioni aggiuntive.

Unità rem: miscela di px e em

Quindi, abbiamo visto che :

px - assoluto, chiaro, comprensibile, non dipendente da niente.
    em - si calcola rispetto alla dimensione del carattere.
    % - si calcola rispetto alla stessa proprietà del genitore (o forse non il genitore, o forse non lo stesso - vedere gli esempi sopra).

Forse è il momento di smettere, forse è sufficiente?

E, no! Non tutte le cose sono fatte comodamente.

Torniamo al tema del carattere. Ci sono situazioni quando vogliamo fare grandi pulsanti "Font aumentare" e "Font diminuire" nella pagina. Facendo clic su di essi verrà attivato JavaScript, che aumenterà o diminuirà il carattere.

Generalmente può essere fatto senza JavaScript, il browser di solito dispone di tasti di scelta rapida per la scalatura come Ctrl ++, ma funzionano troppo stupidamente: prendere e aumentare l'intera pagina, insieme a immagini e altri elementi che non devono essere scalati. E se hai solo bisogno di aumentare il font, perché il visitatore vuole leggere più comodamente?

Quale unità devo utilizzare per impostare i caratteri? Probabilmente non px, perché i valori in px sono assoluti, e se dovrò cambiare, lo dovrò fare quindi in tutte le regole di stile. È puo capitare  che quando abbiamo cambiato la dimensione in una regola, l'altra l'abbiamo dimenticata.

I candidati seguenti sono em e %.

Non c'è differenza tra di loro, perché quando si specifica una dimensione del carattere in percentuale, queste percentuali vengono calcolate dalla dimensione del font del genitore, cioè si comportano nello stesso modo di em.

Sembra che tu possa utilizzarli, ma c'è un problema.

Cerchiamo di utilizzare questo approccio per tag  <li>.

Esaminiamo questa situazione con questa lista:

<ul>
<li>Cane
  <ul>
  <li>puo
    <ul>
    <li>mordere
      <ul>
      <li>molto 
        <ul>
        <li>forte
          <ul>
          <li>è pericoloso</li>
          </ul>
        </li>
        </ul>
      </li>
      </ul>
    </li>
    </ul>
  </li>
  </ul>
</li>
</ul>

  • Cane
    • puo
      • mordere
        • molto
          • forte
            • è pericoloso

Finora questa è una lista nidificata normale.
Ora riduciamo la dimensione del carattere a 1.2em, ecco quello che si ottiene:

<style>
  li {
    font-size: 1.2em;
  }
</style>
<ul>
<li>Cane
  <ul>
  <li>puo
    <ul>
    <li>mordere
      <ul>
      <li>molto 
        <ul>
        <li>forte
          <ul>
          <li>è pericoloso</li>
          </ul>
        </li>
        </ul>
      </li>
      </ul>
    </li>
    </ul>
  </li>
  </ul>
</li>
</ul>

  • Cane
    • puo
      • mordere
        • molto
          • forte
            • è pericoloso

 

 

Il problema è evidente. Volevamo, fare al  meglio, ma si è rivelato ... Ingrandisce sempre di piu . Ogni <li> anidato ha ricevuto una dimensione di carattere di 1.2 dal genitore e alla fine diventato mostruoso. Questo non è proprio quello che volevamo ottenere.

È possibile ridurre la dimensione del carattere solo su un "elemento radice" ... O utilizzare l'unità rem, che, si potrebbe dire, è stata inventata appositamente per tali casi!

L'unità rem imposta la dimensione relativamente alla dimensione del carattere dell'elemento <html>.

Di regola, i browser attribuiscono a  questo elemento  una dimensione "ragionevole" di default, che, naturalmente, possiamo ridefinire e utilizzare valori in  rem per impostare i font all'interno di esso:

<style>
  html {
    font-size: 14px;
  }
  li {
    font-size: 1.2rem;
  }
</style>
<div><button id="up">Cliccare per aumentare grandezza del font</button></div>
<img src="https://js.cx/clipart/angry_dog.png">
<ul>
<li>Cane
  <ul>
  <li>puo
    <ul>
    <li>mordere
      <ul>
      <li>molto 
        <ul>
        <li>forte
          <ul>
          <li>è pericoloso</li>
          </ul>
        </li>
        </ul>
      </li>
      </ul>
    </li>
    </ul>
  </li>
  </ul>
</li>
</ul>
<script>
var html = document.documentElement;
up.onclick = function() {
  // con aiuto di  JS aumentiamo grandezza del font di html per  2px
  html.style.fontSize = parseInt(getComputedStyle(html, '').fontSize) + 2 + 'px';
};
</script>

  • Cane
    • puo
      • mordere
        • molto
          • forte
            • è pericoloso

Abbiamo ricevuto una conveniente scalatura per i caratteri, che non influisce su altri elementi.

Gli elementi la cui dimensione è impostata in rem non dipendono tra loro e nel contesto  e in questo è simile al px, e d'altra parte sono tutti impostati in relazione alla dimensione del carattere <html>.

L'unità rem non è supportata in IE8-.

unità rem non è supportato in IE8-.

Rispetto lo schermo : vw, vh, vmin, vmax

In tutti i browser moderni, ad eccezione IE8-, sono sostenuti nove unità d valori di CSS inseriti nel progetto di standard CSS Values and Units 3 :

    vw - 1% della larghezza della finestra
    vh - 1% della altezza della finestra
    vmin - la più piccola delle (vw, vh), in IE9 inicato come vm
    vmax - il più grande di (vw, vh)

Questi valori sono stati creati in primo luogo, per supportare i dispositivi mobili.

Il loro vantaggio principale  è che  tutte le dimensioni che sono impostate in esso vengono scalati automaticamente quando la finestra viene ridimensionata.

Questo testo è stato scritto con la dimensione del `5vw`.

Si può facilmente vedere come funziona  vh, se si ridimensiona la finestra del browser. Il testo aumenta / diminuisce.

Conclusione

Abbiamo analizzato le unità di misura:

    px sono i pixel assoluti a cui sono collegati e quindi non hanno bisogno di mm, cm, pt e pc. Utilizzato per concretizzare al massimo le dimensioni e specificare le misure precise e chiare.
    em - specifica la dimensione relativa al carattere principale, si può fare riferimento a caratteri specifici: "x" (ex) e "0" (ch), vine utilizato li dove si desidera semplificare ridimensionamento.
    rem - imposta la dimensione relativa al font <html>, viene utilizzata per la convenienza della scala globale: gli elementi che sono pianificati per essere ridimensionati vengono impostati in rem e JS modifica il font in <html>.
    % - rispetto alla stessa proprietà del genitore (come regola, ma non sempre), viene utilizzato per larghezze, altezze e così via, senza di essa non si va da nessuna parte , ma devi sapere rispetto che cosa  si calcola la percentuale.
    vw, vh, vmin, vmax - rispetto alla dimensione dello schermo.

Letto 1101 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso