Diferencia entre las unidades de medida REM y EM en CSS

Diferencia entre las unidades de medida REM y EM en CSS

17 de enero 2019

Hoy día, con los diseños adaptables, los proyectos web se convierten en tareas más complejas de llevar a cabo que hace una década, debido entre otras cosas a que hemos pasado de usar unidades fijas a unidades escalables. Es por eso que actualmente se recomienda usar EM y REM como unidades de medida en CSS y así poder escalar nuestro diseño web de un modo más sencillo.

Para poder entender mejor estos conceptos, vamos a retroceder un poco en el tiempo hasta su origen. Un EM es una unidad de longitud usada en tipografía para imprenta tradicional, que ha sido trasladada al mundo digital dentro de las hojas de estilo con el mismo propósito. Se llama EM porque originalmente esta medida hacía referencia al ancho del tipo de la letra M, es decir, a la pieza que contenía esta letra.

La característica de calcular el tamaño tomando como referencia otro elemento es algo que CSS hace suyo. Esto es importante tenerlo en cuenta ya que estos dos elementos no tienen una medida fija sino que son dependientes.

EM es una unidad que toma como referencia el elemento en el que nos encontramos. Es decir, si nos encontramos en una capa cuyo tamaño de fuente hemos definido con un valor específico, al usar EM éste configurará su escala en base al tamaño de esa fuente. En caso de no tener ninguna definida, por herencia, tomará el valor del elemento padre en el que nos encontremos y así por jerarquía hasta la raíz.

REM en cambio es una unidad de medida que se basa en el tamaño de fuente de la etiqueta HTML de nuestro diseño directamente. Este tamaño de este elemento viene predeterminado por el navegador desde el que se está viendo el portal, actualmente 16px. De este modo, cuando trabajemos con REM estaremos definiendo escalas relativas a ese tamaño raíz.

De modo que podemos resumir que la diferencia entre EM y REM se basa en el elemento que toma como referencia para dar las medidas; el primero adquiere los valores del elemento en el que estamos o del elemento padre por jerarquía; el segundo usará el valor del elemento HTML, ya sea su valor por defecto como el que hayamos definido específicamente.

Así pues, si el elemento del que vamos a tomar la referencia tiene un tamaño de fuente de 14px, entonces 10em o 10rem serán el equivalente a 140px, ya que la fórmula que se aplica para definir el tamaño es 14×10=140.

Publicado por Jesús Tovar

Categorías: CSS, Diseño

Etiquetas: ,

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio web utiliza cookies, si continúas navegando estás dando tu consentimiento. Consulta nuestra política de cookies y de privacidad.

ACEPTAR
Aviso de cookies