10

En CSS existen dos tipos de medidas relativas: em y rem. El primero es un tanto por uno que toma como referencia el tamaño del elemento padre. En el segundo caso, tenemos otro tanto por uno. Ahora bien, este no toma de referencia al elemento padre, sino, por lo que he leído, al elemento raíz.

Investigando, he leído también que por "elemento raíz" se refieren al estilo original o estándar de las etiquetas HTML para el elemento en concreto sobre el cual estemos trabajando.

Pero no me cuadra y os pongo un ejemplo para ilustrar el origen de mi duda:

#div{
    width: 20rem;
    height: 20rem;
    background: red;
    margin-top: 100px;
}

Un div, por defecto, debería tener medidas 0x0. Ahora bien, está muy claro que, si aplicáis este estilo a un div, el tamaño es otro.

Así pues: ¿de dónde salen las medidas de referencia para la unidad rem?

1
  • creo que lo sacaba del font-size
    – Christian
    el 7 ago. 2021 a las 1:37

2 respuestas 2

6

rem es una medida relativa al tamaño de la fuente del navegador, por defecto está es de 16px por lo que: 1rem = 16px

También como un tip puedes referenciar el fontsize global en el css como un 62.5 lo que hace que: 1rem = 10px

Y entonces es una medida fácil de recordar y utilizar.

Se recomienda usar rem como unidad de medida en el css ya que si el usuario cambia la medida de la fuente del navegador por una necesidad visual los componentes ajustarán su tamaño en proporción a esta.

4

En primer lugar si es correcto lo de decir que la unidades em sacan su referencia de su elemento padre, pues esto es el principal problema de usar estas unidades y es que muchas veces se obtiene un resultado inesperado por las reacciones en cascada, prácticamente las unidades em se basan en herencia.

Con rem se soluciona esto. Rem significa Root em y se basa en que con sólo declarar el rem base a html las medidas siguientes no dependerán de la herencia sino del número base. Cuando se especifica en la propiedad del elemento raíz, las unidades rem hacen referencia al valor inicial de la propiedad font-size, de esta forma.

html {
   font-size:62.5%;
}

La medida 62,5% es una convención más que algo estricto. Aún hay algunas cosas más que explicar pero esto es la base, si quieres una mayor explicación, avísame y edito la respuesta.

2
  • Entiendo que ese estilo es, como bien explica el compañero de la otra respuesta, para lograr un font-size de 10px en el documento html. Mi respuesta queda entonces respondida. Ahora bien, me surge otra: ¿es mejor em o rem? Hace literalmente cuatro días que leí sobre el modelo responsive y empleo la unidad em para ello. Pero sí que es cierto que la herencia puede hacer de las suyas y dejar, por ejemplo, una letra enana en un móvil si aplicas porcentajes menores que uno reiteradamente. Por eso mi duda. el 7 ago. 2021 a las 2:52
  • 1
    tal y como digo en mi respuesta rem soluciona estos problemas, es una medida mas nueva que em pero sirve de mucho, claramente te evitarás varios problemas y yo lo recomendaría, puedes :D
    – Christian
    el 7 ago. 2021 a las 3:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.