Puedes haber entendido el uso de unidades flexibles de medida, pero podrías no haber entendido completamente cuando usar rem y cuando usar em. ¡Éste tutorial te ayudará a descubrirlo!
Tanto em como rem son flexibles, unidades escalables que son traducidas por el navegador en valores de pixeles, dependiendo de los ajustes del tamaño de la fuente en tu diseño. Si usas un valor de 1em o 1rem, pudiera traducirse en el navegador como cualquier cosa desde 16px hasta 160px o cualquier otro valor.
Por otro lado valores en px son usados por el navegador como son, así que 1px siempre se mostrará exactamente 1px.
Manipula el regulador deslizante en éste ejemplo en CodePen para ver como el valor de las unidades rem y em pueden traducirse en diferentes valores de pixeles, mientras explícitamente estableces las unidades en px fijas en tamaño:
La Gran Pregunta
Usar unidades em y rem nos da flexibilidad en nuestros diseños, y la capacidad de escalar elementos hacia arriba y hacia abajo, en lugar de estar estancados en tamaños fijos. Podemos usar ésta flexibilidad para hacer nuestros diseños más fáciles de ajustar durante el desarrollo, más responsivo, y para permitir a usuarios de navegador controlar la escala general de sitios para máxima legibilidad.
Las dos unidades em y rem proporcionan ésta flexibilidad y trabajar de formas similares, así que la gran pregunta es, ¿cuándo deberíamos usar valores em y cuando debemos usar valores rem?
Diferencia crucial
Vamos a comenzar sobre como trabajan las unidades rem y em desde cero para asegurarnos que conozcas cada detalle. Luego nos moveremos a por qué debes usar unidades em o rem.
Finalmente veremos la aplicación práctica de exactamente en que elementos de un diseño típico deberías usar cada tipo de unidad.
Como unidades rem se traducen a valores de pixel
Cuando se usan uniddes rem, el tamaño del pixel al que traducen depende del tamaño de la fuente del elemento raíz de la página, o sea el elemento html. Ese tamaño de fuente raíz es multiplicado por cualquier numero que está usando con tu unidad rem.
Por ejemplo, con un tamaño fuente de elemento raíz de 16px, 10rem debería equivaler a 160px, o sea 10 X 16 = 160.
Por ejemplo, con un tamaño fuente de elemento raíz de 16px, 10rem debería equivaler a 160px, o sea 10 X 16 = 160.
Como las Unidades em se traduce a valores de pixeles
Cuando se usan unidades em, el valor del pixel con el que terminas es una multiplicación del tamaño de fuente en el elemento al que se le está aplicando estilo.
Por ejemplo, si un div tiene un tamaño de fuente de 18px, 10em equivaldría a 180px, o sea 10 X 18 = 180.
Importante para Saber:
Es un mal entendido generalizado que las unidades
em son relativas al tamaño fuente del elemento padre. De hecho, como lo especifica W3, son relativos al tamaño de fuente "del elemento en el que son usadas".
Los tamaños de la fuente del elemento padre pueden afectar los valores
em, pero cuando eso ocurre es solamente por herencia. Veamos por qué, y cómo esto funciona en acción.
No te pierdas la parte 2 de este artículo.
