Probablemente no sueñas con el dimensionamiento de elementos CSS por la noche, pero si estás construyendo un sitio web o una aplicación, este tema definitivamente vale la pena pensar en él.
Mientras que algunas unidades de CSS se llevan bien con tu diseño receptivo, otras podrían mostrar una actitud rebelde. Ser capaz de distinguir entre los diferentes caracteres puede ahorrarte algunos dolores de cabeza importantes más adelante.
Toma la combinación de REM y EM. ¿Cuál deberías usar, y por qué?
¡Quédate con nosotros durante los próximos párrafos, y ¡revelaremos todo!
REM vs. EM en pocas palabras
Si buscas una respuesta rápida, aquí tienes la versión TL;DR:
- REM: Esta unidad se basa en el elemento raíz (generalmente la etiqueta
.) No importa lo que pase en la página, tu dimensionamiento se mantendrá consistente. - EM: Esta unidad busca orientación. Si el elemento padre cambia, tu dimensionamiento seguirá la tendencia.
Si quieres recordar la diferencia, ten en cuenta que la “R” en REM significa “raíz”.
Nota de Nerd: ¿Por qué ambas unidades terminan con “EM”? Esto no es una abreviatura. Cuando todo el texto se imprimía, los tipógrafos usaban el ancho de una M mayúscula como referencia para el dimensionamiento del texto. Bastante ingenioso, ¿verdad?
Entonces, ¿cuál deberías usar?
Bueno, eso depende.
Si quieres que el texto se ajuste a su entorno, EM podría ser la mejor opción. Pero si quieres que el dimensionamiento se mantenga consistente en todo tu sitio web, deberías cambiar a REM.
¿Por qué?
- EM: Más flexible, pero puede complicarse si no tienes cuidado.
- REM: Dimensionamiento consistente, ideal para diseño receptivo.
Diseño Receptivo
El diseño receptivo permite que un sitio web se adapte al tamaño de pantalla del dispositivo en el que se está viendo. Por lo tanto, el sitio web se verá de manera diferente en diferentes dispositivos.
Leer más
¿Todavía confundido? No te preocupes, profundizaremos en un segundo.
Solo recuerda por ahora que: REM suele ser la opción más segura para la mayoría de los sitios web.
Comprendiendo REM y EM
Bien, adentrémonos un poco en los detalles.
Tanto REM como EM son unidades relativas. Esto significa que mantienen el mismo tamaño relativo a una medida específica.
Este tipo de dimensionamiento juega un papel clave en el diseño receptivo.
Los tamaños absolutos (por ejemplo, px) siempre permanecen iguales, lo que significa que el texto puede verse pequeño en una computadora de escritorio y enorme en un teléfono. En contraste, las unidades relativas pueden adaptarse a diferentes dispositivos y diseños.
En un contexto digital, REM y EM todavía se utilizan principalmente para medir texto. Sin embargo, también puedes usar estas unidades para:
- Márgenes
- Relleno
- Ancho y alto
- Altura de línea
- Propiedades de borde
- Sombra de caja
- Posicionamiento
- Consultas multimedia
¿Qué otros factores considerar al elegir entre REM y EM? ¿Cómo afecta la elección de unidad CSS al rendimiento de un sitio web?
