¿Están los rems reemplazando ems en CSS?

Estaba leyendo acerca de rem units in CSS3, y estaba un poco confundido. Si usa rem, ¿todavía usa em o lo reemplaza?¿Están los rems reemplazando ems en CSS?

Por ejemplo:

.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; 
}

Sólo tratando de averiguar si rem toma el lugar de em, o si es sólo otra unidad.

Fuente

2011-11-11 jfrosty

Incluye enlaces para mayor bien :) –

http://snook.ca/archives/html_and_css/font-size-with-rem cubre las diferencias entre rem y em. – mjwills

Creo que REM se separó amigo. –

Rem es el tamaño em para el elemento raíz (html). Eso significa que una vez que defina el tamaño de fuente del elemento html, puede definir todas las unidades rem relacionadas con eso.

Por ejemplo:

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

Rem está apoyado en Safari 5, Chrome, Firefox 3.6+, e incluso Internet Explorer, pero para older browsers todavía tiene que utilizar em, por ciento o píxeles.

Fuente

2011-11-12 01:05:19 jQuerybeast

La principal diferencia es que 'rem' le permite establecer' font-size' con relación al * tamaño de fuente raíz * (como arriba) del elemento 'html', ** no ** relativo al * tamaño de letra de un elemento padre *. Soporte de IE? > = 9. –

+11

Si va a extraer el código de la web, es correcto proporcionar la fuente: http://snook.ca/archives/html_and_css/font-size-with-rem ¿O fue Snook quien la tomó? ¿¿de aquí?? –

Usa px y rem. como en el código anterior, establezca font-size: 14px; tamaño de letra 1.4rem. rem funcionará para navegadores modernos y px funciona para navegadores en los que rem no es compatible. (fuente: snook.ca) – Orahmax

No, es una unidad diferente. em se basa en el tamaño de fuente del elemento principal, mientras que rem se basa en el tamaño de fuente raíz, que creo que es el tamaño de fuente del elemento html.

Fuente

2011-11-11 22:57:04 prodigitalson

Entonces, ¿es correcto el ejemplo que tuve? ¿Cómo usarías REM? – jfrosty

Cualquiera puede ser correcto según su intención. La cosa es '2.4em' no es necesariamente lo mismo que' 2.4rem', obtienen su valor base de diferentes elementos, por lo que si esos elementos tienen diferentes tamaños de letra, entonces su margen será diferente. – prodigitalson

Rem es solo una unidad más, no reemplaza em como em no reemplazó pixel.

Fuente

2011-11-12 01:48:00 Litek

Tema viejo, pero creo que necesita algo más de claridad.

Tanto em y rem son unidades relativas, pero rem es siempre relación con el tamaño html fuente (el elemento “raíz”) en lugar del tamaño de fuente heredada.

Nunca use px, o pt para el caso, en la pantalla. Codificando el tamaño de la fuente, ignoras la configuración de la fuente preferida personal del usuario y haces que el zoom sea menos cooperativo.

Ambos em y rem tienen un papel útil que jugar. Ninguno es perfecto para todas las ocasiones. He aquí algunos ejemplos:

Uso rem para evitar dimensionamiento composición:

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

El primero dará lugar a listas anidadas tener progresivamente mayor tamaños, ya que la unidad em heredará de un li elemento padre.

Uso rem para establecer tamaños independientemente:

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

Y, por supuesto, puede utilizar ambos:

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

dos años por la pista, ahora, y lo podemos usar, ignorando con seguridad los navegadores heredados.

Fuente

2016-07-10 07:54:43 Manngo

¿Están los rems reemplazando ems en CSS?

Respuesta

Cuestiones relacionadas