2016-05-05 30 views
14

Vorrei sapere perché bootstarp scegliere rem e em invece px per la nuova versione di bootstarp 4.Perché Bootstrap 4 sceglie rem ed em invece px?

We can see here

alcune variabili esempi:

$font-size-h1: 2.5rem !default; 
    $font-size-h2: 2rem !default; 
    $font-size-h3: 1.75rem !default; 
    $mark-padding: .2em !default; 

E 'un buon uso prassi em e rem per:

margin: 0; 
    padding: 0; 
    bottom: 0px; 
    width: 100%; 

Sono solo curioso di sapere che non potevo trova sul web su questo in modo che la ragione che sto chiedendo.

+0

gli esempi che hai fornito non sarebbero buoni candidati, poiché i valori 0 non sono relativi alla dimensione impostata nell'elemento radice e non è possibile eseguire valori 100% con rem. – jeroenvisser101

risposta

14

Con rem, tutte le dimensioni dei caratteri sono relative all'elemento radice (ovvero, il tag html ). La ragione di ciò è semplificare la scalabilità orizzontale o verticale dei dispositivi. Potresti cambiare tecnicamente il tag html in una dimensione più piccola o più grande per ridimensionare allo stesso modo tutte le dimensioni dei caratteri, che è una caratteristica molto bella.

... [T] la cosa principale da portare via è che tutto è dinamico e relativo al tag HTML radice.

Ad esempio, modificare la dimensione del font css html in un numero diverso ... e osservare come l'intera griglia si adatta e scala.

Fonte: Scotch.io (https://scotch.io/bar-talk/whats-new-in-bootstrap-4#toc-new-unit-rems-for-typography)

+0

meravigliosa risposta, grazie mille. Posso usarlo per larghezza, padding e margine? – Raduken

+0

I REM sono utili quasi ovunque la dimensione sia impostata in modo esplicito. – isherwood

+0

Sia gli EM che i pixel hanno i loro difetti con le domande dei media quando si tratta della differenza di una posizione decimale di quell'unità. Se ti capita di utilizzare sia le medie che la massima larghezza delle query nello stesso blocco di codice, avrai un brutto momento non appena l'utente inizia a modificare lo zoom del browser o la dimensione predefinita del carattere. https://engageinteractive.co.uk/blog/em-vs-rem-vs-px – Neel

1

Vale la pena ricordare che Bootstrap 4 (attualmente v4.0.0-beta) conservato i punti di interruzione in px e non em. Dalla docs:

Mentre Bootstrap utilizza SME o rem per definire delle diverse dimensioni, pxs sono usati per i punti di interruzione di rete e larghezze contenitore. Questo perché la larghezza della vista è in pixel e non cambia con la dimensione del carattere.