Adonis Mendoza

Adonis Mendoza.
UX/UI Designer and Front-end Developer.
Especialista en desarrollo front-end para sitios Web y Aplicaciones Móviles.
Si necesitas ayuda con tu marca o producto puedes contactarme directamente a través de arteadonis@gmail.com

Montevideo, Uruguay
arteadonis@gmail.com
Cómo y por qué deberías usar unidades ‘rem’ en tus proyectos

Cómo y por qué deberías usar unidades ‘rem’ en tus proyectos

Me sorprendió mucho cuando me di cuenta de que simplemente puedo cambiar el ancho, la altura, el relleno, el margen y cualquier elemento literario al que pueda aplicar la unidad de píxeles con solo un ajuste en mi consulta de medios al mismo tiempo en lugar de escribir cientos en líneas de códigos en consultas de medios. ¡Es increíble, sí! Lo único que debía hacer era usar unidades rem.

Usar unidades rem

Ahora veamos cómo funciona esta increíble técnica. Primero entender cómo funciona la unidad rem es la clave para dominar esta técnica simple pero poderosa. La unidad rem es una de muchas unidades de medida relativas que podemos usar en el css de nuestro proyecto. Si quieres profundizar más en las unidades rem o unidades medida relativas te dejo la documentación aquí para que te diviertas

La unidad rem en relación con el tamaño de la fuente raíz

La unidad rem siempre está en relación con el tamaño de la fuente raíz, por lo que si establecemos el tamaño de la fuente raíz, otras medidas se pueden cambiar fácilmente en nuestra página.

html {
tamaño de fuente: 10px;
}

Ahora, tenga en cuenta que el tamaño de fuente predeterminado del navegador es de 16 píxeles, pero estamos configurando el nuestro en 10 píxeles para facilitar los cálculos. Entonces 10px es igual a 1rem, 45px será 4.5rem. Todo lo que tenemos que hacer es simplemente dividir todos los píxeles por 10 y ese es nuestro rem.

El único problema es que al configurar nuestro tamaño de fuente raíz a 10px, anulamos la configuración del tamaño de fuente del navegador. Algunos usuarios con mala visión cambian manualmente la configuración de tamaño de fuente del navegador para tener un tamaño de fuente más grande.

Establecer el tamaño de fuente de 10px en nuestra raíz elimina la posibilidad de que estas personas vean nuestro sitio web correctamente porque ya no pueden cambiar el tamaño de fuente predeterminado.

Unidades relativas rem

Permanecerá 10 píxeles sin importar el tamaño de fuente predeterminado del usuario, esta es una mala práctica. Es por eso que vamos a establecer nuestro tamaño de fuente en un porcentaje, que se traducirá en un porcentaje del tamaño de fuente dado por el navegador.

Contamos con el hecho de que el tamaño de fuente predeterminado del navegador suele ser 16px, y ese sigue siendo el valor predeterminado absoluto.

Entonces, hagamos cálculos matemáticos simples, si ponemos 100% aquí, esto significaría que el tamaño de fuente raíz es de 16 píxeles.

Todo lo que tenemos que hacer es dividir lo que queremos, que es 10, por 16. 10/16 * 100 = 62.5%.

Entonces eso se traducirá a 10 píxeles, que es lo que queremos.

html {
tamaño de fuente: 62.5%;
}

Esta técnica es ampliamente utilizada en la comunidad de desarrolladores de CSS porque es muy simple y muy poderosa. Lo responsivo ahora es la regla por lo que si estas comenzando un nuevo proyecto o rediseñando una antigua página web considera utilizar esta técnica para mantener la flexibilidad de tus fuentes en diferentes dispositivos

Adonis Mendoza arteadonis@gmail.com

UX/UI Designer and Front-end Developer - Especialista en desarrollo front-end para sitios Web y Aplicaciones Móviles

No Comments

Post a Comment

do it!