Canal de Youtube

Calcular medidas en REM

DE PX A REM
DE REM A PX

Si quieres que un elemento mida pixeles, entonces deberías usar una medida relativa de 0 REM en tu hoja de estilos CSS.

Si harás que un elemento mida REM en tu hoja de estilos CSS, la medida final en pixeles sería de 0 pixeles.

Esta es una pequeña aplicación para ayudarte a calcular medidas en REM de elementos HTML para usar en tu hoja de estilos CSS, sin tener que aplicar hacks innecesarios.

Históricamente se ha dicho que para poder usar REM en CSS, debemos primero pasar el font size del selector HTML a 62.5%, de tal forma que nos resulte sencillo usar la medida REM asimilándolo con pixeles. Así por ejemplo, para conseguir una medida de 12px, deberíamos usar 1.2rem.

Es algo bastante útil y sencillo, pero hace que el navegador tenga que dar vueltas innecesarias para calcular las medidas de los elementos e ignoremos las configuraciones de tamaño que el usuario tenga en su navegador y esto puede tener algunos efectos visuales indeseados, por eso, lo que propongo con esta herramienta es que usemos REM, sin la necesidad de cambiar el tamaño base de HTML manteniendo su medida estándar que originalmente es 16px.

 

Un abrazo,
@FranciscoAMK