I rems sostituiscono gli em in CSS?

Stavo leggendo su rem units in CSS3 ed ero un po 'confuso. Se usi rem, usi ancora em o lo sostituisci?I rems sostituiscono gli em in CSS?

Ad esempio:

.selector { 
    margin-bottom:24px; 
    margin-bottom:2.4rem; 
    font-size:16px; 
    font-size:1.6rem; 
}

.selector { 
    margin-bottom:24px; 
    margin-bottom:2.4em; 
    margin-bottom:2.4rem; 
}

Sto solo cercando di capire se rem prende il posto di em, o se è solo un'altra unità.

fonte

2011-11-11 jfrosty

Includi collegamenti per il bene superiore :) –

http://snook.ca/archives/html_and_css/font-size-with-rem copre le differenze tra rem ed em. – mjwills

Penso che il REM si divida. –

Rem è la dimensione dell'em per l'elemento radice (html). Ciò significa che una volta definita la dimensione del carattere dell'elemento html, è possibile definire tutte le unità rem relative a tale.

Ad esempio:

html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */ 
h1 { font-size: 2.4rem; } /* =24px */

Rem è supportato in Safari 5, Chrome, Firefox 3.6 e versioni successive, e anche Internet Explorer, ma per older browsers si devono ancora utilizzare em, cento o px.

fonte

2011-11-12 01:05:19 jQuerybeast

La differenza principale è che 'rem' consente di impostare' font-size' in relazione alla * dimensione del carattere root * (come sopra) dell'elemento 'html', ** non ** relativo alla * dimensione font di un elemento genitore *. Supporto IE? > = 9. –

+11

Se stai per sollevare il codice dal web, è educato fornire la fonte: http://snook.ca/archives/html_and_css/font-size-with-rem O è stato Snook a prenderlo da qui?? –

Usa sia px che rem. come nel codice sopra impostato font-size: 14px; font-size 1.4rem. rem funzionerà per i browser moderni e px funziona per i browser in cui rem non è supportato. (fonte: snook.ca) – Orahmax

No, è un'unità diversa. em si basa sulla dimensione del carattere del genitore, mentre rem si basa sulla dimensione del carattere di root, che credo sia la dimensione del font dell'elemento html.

fonte

2011-11-11 22:57:04 prodigitalson

Quindi, entrambi gli esempi sono corretti? Come utilizzeresti correttamente i REM? – jfrosty

Uno potrebbe essere corretto a seconda del tuo intento. Il fatto che '2.4em' non sia necessariamente lo stesso di' 2.4rem', ottengono il loro valore di base sotto forma di elementi diversi, quindi se questi elementi hanno dimensioni di font diverse, il tuo margine sarà diverso. – prodigitalson

Rem è solo un'altra unità, non sostituisce em come non ha sostituito pixel.

fonte

2011-11-12 01:48:00 Litek

Argomento vecchio, ma penso che abbia bisogno di maggiore chiarezza.

Sia em e rem sono unità relative, ma rem è sempre rispetto alla dimensione del font html (l'elemento “root”) piuttosto che la dimensione del carattere ereditato.

Mai utilizzare px o pt per quello, sullo schermo. Codificando a fondo la dimensione del carattere, ignori le impostazioni dei caratteri personali preferite dell'utente e rendi meno cooperativo lo zoom.

Entrambe em e rem hanno un ruolo utile da svolgere. Né è perfetto per tutte le occasioni. Ecco alcuni esempi:

Usa rem per evitare dimensionamento compounding:

ul#something li { font-size: 1.2rem; } 
    … or … 
ul#something li { font-size: 1.2rem; }

Il primo comporterà elenchi annidati avente progressivamente grande dimensioni, in quanto l'unità em erediterà da un genitore li elemento.

Usa rem per impostare dimensioni indipendentemente:

article { font-size: .8rem; }  /* article base font size */ 
article>h2 { font-size: 2rem; }  /* … except for h2 */

E, naturalmente è possibile utilizzare entrambi:

div#something { font-size: 1.2rem; }  /* based on html size */ 
div#something>h2 { font-size: 2em; }  /* based on div#something */

Due anni lungo la pista, ora, e possiamo usarlo, ignorando tranquillamente i browser legacy.

fonte

2016-07-10 07:54:43 Manngo

I rems sostituiscono gli em in CSS?

risposta

Problemi correlati