unit - que son los rem css

¿Rems están reemplazando ems en CSS?

Question

Estaba leyendo acerca de las unidades rem en CSS3 , y estaba un poco confundido. Si usas rem , ¿sigues usando em o eso lo reemplaza?

Por ejemplo:

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

o

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

Solo intento averiguar si rem toma el lugar de em , o si es solo otra unidad.

Answer 1

No, es una unidad diferente. em se basa en el tamaño de fuente del padre, 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 .

Answer 2

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

Por ejemplo:

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

Rem es compatible con Safari 5, Chrome, Firefox 3.6+ e incluso Internet Explorer, pero para los navegadores más antiguos todavía tiene que usar em, percent o px.

Answer 3

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

Answer 4

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

Tanto em como rem son unidades relativas, pero rem siempre es relativo al tamaño de fuente html (el elemento "raíz") en lugar del tamaño de fuente heredado.

Nunca use px , o pt para esa materia, en la pantalla. Al codificar el tamaño de la fuente, ignora la configuración personal de la fuente preferida del usuario y hace que el zoom sea menos cooperativo.

Tanto em como rem tienen un papel útil que desempeñar. Tampoco es perfecto para todas las ocasiones. Aquí hay unos ejemplos:

Utilice rem para evitar el tamaño de composición:

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

La primera resultará en listas anidadas que tendrán tamaños progresivamente más grandes, ya que la unidad em heredará de un elemento li principal.

Utilice rem para establecer tamaños de forma independiente :

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

Y, por supuesto, puedes usar ambos:

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

Dos años más tarde, ahora, y podemos usarlo, ignorando de forma segura los navegadores antiguos.