Es común hoy en dia mirar un archivo css con definiciones para ancho y largo con rem o em, ya que en la actualidad se necesita que las páginas web tengan su diseño escalable y es debido a que la página debe visualizarse en cualquier pantalla.
En css (Hoja de estilos en cascada - Cascading Style Sheets) existen dos grupos generales de medidas para definir el espacio que va ocupar los elementos html y como va hacer el espacio entre los elementos y los elementos internos; el primer grupo se define como medidas absolutas que es si es una medida completa que representara siempre el valor que se especifique entre estas medidas tenemos los pixeles (px) que es si representa un pixel de la pantalla y las siguientes, in - pulgadas, cm - centímetros, mm - milímetros, pt - puntos, pc - picas.
El segundo grupo son las medidas relativas, y se nombran así porque son medidas que dependen de una referencia a un valor o una medida absoluta, y de cierta forma al usar estas medidas los elementos se adaptan a los diferentes dispositivos, para no hacerlo tan largo, las medidas rem y em son medidas que se basan en la anchura de la letra m mayúscula (M) del tipo de fuente que se utilice, la diferencia entre las dos es que em inciden la herencia de los elementos y rem siempre toma de referencia el elemento padre (la etiqueta ) del documento para definir el tamaño, veamos esto con el siguiente código.
link al código en github
link al código en github
Definimos dos etiquetas div y le asignamos unos estilos personales a cada uno, uno con medidas en em y el otro con medidas en rem; al visualizar la página los dos bloque son idénticos tanto en alto y ancho como en tamaño de letra.
Al visualizar con el inspector de elementos del navegador (en este caso estoy usando chrome) podemos ver cuánto en pixeles representan los valores otorgados a los div, y lo describo, tanto el height y width de ambos div son de 160px y los valores con sus medidas que se asignaron a estos div fueron de 10em y 10rem lo que no lleva a concluir que un rem o un em equivale a 16px (160px/10em), pero de donde podemos sacar el valor de referencia de 16px, con la ayuda del inspector de elementos lo podemos descifrar; segun la teoria tanto em y rem toman como referencia la letra M de la fuente que se esté usando, lo que nos lleva a pensar que en si lo que buscamos es el font-size definido, al dejar seleccionado uno de los elementos div y desplazar el scroll al final de la sección en donde esta el cuadro que muestra el tamaño, padding, border y margin del elemento logramos identificar lo siguiente.
El ancho y alto es de 160px, y lo que nos interesa es el font-size que está definido de 16px, con lo que concluimos que ese es el valor de referencia de las medidas em y rem, además tenemos otro dato importante, el cual es el tipo de fuente que se está usando y esta es la Time New Roman; lo que nos lleva a nuestro siguiente experimento, si, si exacto como lo piensas, cambiar el tamaño de la fuente. Comencemos por cambiar el tipo de fuente, para esto definimos la siguiente regla css.
body{
font-size: 20px;
}
y con esto obtenemos lo siguiente
El tipo de tamaño de letra del título cambio y también lo hizo el tamaño del div que definimos con em pero el definido con rem sigue igual, el div definido con em tiene altura y anchura de 200px y el font-size es de 20px, si pensamos un poco en la teoría que mencione al inicio, llegamos a la conclusión de que rem toma su referencia del elemento root, y esta es la etiqueta html del documento, ahora cambiemos el tamaño de la fuente para esta etiqueta y le daremos el valor de 30px.
html{
font-size: 30px;
}
Con esto obtenemos lo siguiente
Con esta prueba ya tenemos más que claro que rem y em dependen del tamaño definido de la fuente y que rem siempre toma de referencia la etiqueta raiz (), para ver cual es el punto de referencia de donde toma el tamaño em, haremos lo siguiente, crearemos varias etiquetas div y dentro de ellas dejaremos las dos etiquetas div definidas con em y rem, esto sera asi, a la etiqueta html de definiremos el font-size en 10px, la etiqueta body con font-size 15px, el primer div con font-size 20px, el segundo con font-size con 25px, y finalmente un cuarto con un font-size de 30px y este será el código.
link al código en github
link al código en github
y esto es lo que obtenemos
El div definido con rem (div inferior), tiene alto y ancho de 100px, con esto es más que claro que la referencia de rem siempre la va a tomar del tamaño de la fuente definida en la etiqueta html, ahora para el div definido con em, el alto y ancho es de 300px, con lo que tenemos que la referencia la tomo del div con clase .div3 el cual se definió con un font-size de 30px, con esto concluimos que em toma su referencia del tamaño de fuente definido de la etiqueta padre en este caso el tercer div.
Llegados a este punto, la pregunta que surge es ¿cuál de las dos medidas es mejor usar?, por el momento eso va en gustos, a mi me gusta usar mas rem debido a que siempre va a tener una referencia la cual la es fácil encontrar y se me hace mas claro ya que para definir el tamaño de cualquier elemento tengo a la mano el tamaño, em no lo uso mucho debido a que se debe tener en cuenta los elementos anidados y si hay una pagina con mucho código esto puede llegar a ser confuso; si no estoy mal creo que la w3c prepara un estándar con rem, pero esto es un rumor o sea que mejor esperemos a ver que publican.
Bueno como siempre, espero que les sea de utilidad, trate de hacer un laboratorio, experimentar las cosas es lo que me gusta y el mejor metodo que tengo es el ensayo y error, me divertí haciendo los códigos y esperaba hacer un post más corto, ir al punto en si, pero ya saben me gusta experimentar y a la final medeje llevar.
Los códigos estan en github, para la próxima lo subire a gitlab y para un próximo post hablaré de gitlab, tambien escribire sobre algo que quiero aprender sobre unas librerías de javascript para videojuegos.
hasta la próxima que espero sea pronto, y si te gusto el post, compartelo en tu canal, blog, o en tus redes sociales.
happy coding
happy coding
